zoukankan      html  css  js  c++  java
  • css3动画:animation

    例:

    -webkit-animation: myfirst 5s linear 2s infinite alternate;
    animation: myfirst 5s linear 2s infinite alternate;

    @keyframes myfirst{
      from{background:red;}
      to{background:yellow;}
    }
    @-webkit-keyframes myfirst{
      frome{background:red;}
      to{background:yellow;}
    }
    //或者
    @keyframes myfirst{
      0%{ }
      25%{ }
      50%{ }
      100%{ }
    }

     参数及含义:

    animation-name: 动画的名字

    animation-duration: 动画完成一个周期所花费的秒数,默认是0

    animation-timing-function: 规定动画的速度曲线,默认是ease(动画以低速开始,然后加块,在结束前变慢);

                  linear(动画从头到尾的速度是相同的)

                  ease-in(动画以低速开始)

                  ease-out(动画以低速结束)

                  ease-in-out(动画以低速开始和结束)

    animation-delay: 规定动画何时开始,默认是0;

    animation-iteration-count: 规定动画被播放的次数,默认是1, infinite(无限循环)

    animation-direction: 规定动画是否在下一周期逆向地播放,默认是normal(不逆向播放)

                reverse(动画反向播放)

                alternate(动画在奇数1,3,5、、、正向播放,在偶数2,4,5、、、反向播放) 

                alternate-reverse(动画在奇数次1,3,4、、、反向播放,在偶数次2,4,6、、、正向播放) 

  • 相关阅读:
    记一次对网站的SEO优化改造
    pc端页面添加响应式布局
    linux开启coredump
    vue中鼠标事件
    垂直居中的几种方法
    最准确的身份证号码正则验证
    将数组[NaN ,1,21,32,NaN,41,5]里面的NaN成员剔除(复用underscore.js的filter方法)
    项目中使用Mockjs模拟数据
    研究生学习与生活(2019)
    研究生学习与生活(九)
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6490222.html
Copyright © 2011-2022 走看看