css动画-animations

css animations 使从一个css样式转换为另一个样式。 一般动画都是由@keyframes实现

animation子属性

animation-delay  设置延时

animation-direction 设置动画运行后，反向还是重新运行  alternate 来回动画

animaton-duration 一个周期的时长

animation-iteration-count  设定动画重复次数    infinite重复

animation-name   指定@keyframes 描述关键帧的名称

@keyframes 规则

  

    @keyframes slidein {
      from{
        margin-left: 100%;
        width: 100%;
      }

      to{
        margin-left: 0;
        width: 100%;
      }
    }

常用类型是：

@keyframes identifier {
      0%{
        top:0;
        left: 0;
      }
      30%{
        top:50px;
      }
      68%, 72%{
        left: 50px;
      }
      100%{
        top:100px;
        left:100%;
      }
    }

animation 属性简写  依次排列

animation-name

animation-duration

animation- timing-function

animation-delay

animation- iteration-count

animation-diraction

一般前三个就可以了！

animation- timing-function 属性

linear速度从头到尾一样

ease 默认  低速开始  在加速 在降速

ease-in-out 低速开始和结束

cubic-bezier（n,n,n,n）自己设定

animation-iteration-count 播放次数

n 直接定义数字

infinite 无限播放 

 

实例

p{
      position: relative;
      width: 100px;
      border: 1px solid #000;
      animation: fly 2s ease 1s infinite alternate;
    }
    @keyframes fly {
      0%{
        width: 100px;
        left: 100%;
      }
      50%{
        width: 150px;
        left: 50%;
      }
      100%{
        width: 100px;
        left: 0;
      }
    }