zoukankan      html  css  js  c++  java
  • CSS3-animation,动画

    动画 Animaion只应用于页面中已存在的DOM元素上。

          
          IE10及主流浏览器支持,Safari和Chrome加前缀。

      ①animation:可为一个元素添加多个animation。

          

          animation-name:给@keyframes定义一个名称。默认none无效果。
          animation-duration:定义动画一个周期的时间。默认0。单位s。
          animation-timing-function:定义动画的速度曲线。【同transition】
          animation-delay:定义过渡效果何时开始。默认0。单位s。
          animation-iteration-count:定义循环次数。默认1。infinite无限。
          animation-direction:定义播放动画的方式。
            normal:先前播放。alternate:偶数次向前播放,基数次反向播放。
          animation-play-state:规定动画播放状态。
            running、paused。
            可用JavaScript通过此属性控制动画。

        Animation的属性变化图:

          

      ②关键帧:
         @keyframes规则:规定动画效果【CSS样式】。
          1)至少规定动画名和时长。
          2)keyframes的单位必须是百分比值。
          关键字from和to等同于0%和100%。为了得到最佳兼容,应该始终定义0%和100%选择器。

          div1{
            animation: myfirst1 5s;
          }
          keyframes myfirst1{
            from {background:red;}
            to {background:yellow;}
          }
    
    
          可设置不同时间段的动画:
          div2{
            animation: myfirst2 5s;
          }
          @keyframes myfirst2{
            0%   {background: red;}
            25%  {background: yellow;}
            50%  {background: blue;}
            100% {background: green;}
          }
  • 相关阅读:
    获取jsonPath的节点名称
    如何删除 macOS High Sierra 上的 swapfile
    Prototype fake it till make it.观后感
    intellij idea 初步环境熟悉
    一个比较综合的项目--》>图片缓存,下拉刷新等
    写的很好的博客->有关性能优化、图片缓存等
    layout优化之-》viewStub,requestFocus,merge,include
    有关ActionBar
    android:installLocation 解析
    Android开发效率—Eclipse快捷键
  • 原文地址:https://www.cnblogs.com/slowsoul/p/3144236.html
Copyright © 2011-2022 走看看