关于css:css动画

4次阅读

共计 861 个字符，预计需要花费 3 分钟才能阅读完成。

关键帧（keyframe）是指动画过程中某个特定时刻。咱们定义一些关键帧，浏览器负责填充或者插入这些关键帧之间的帧图像

 @keyframes over-and-back {
    0% {background-color: hsl(0, 50%, 50%);
      transform: translate(0);
    }

    50% {transform: translate(50px);
    }

    100% {background-color: hsl(270, 50%, 90%);
      transform: translate(0);
    }
  }

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
默认值：none 0s ease 0s 1 normal

值	形容
animation-name	规定须要绑定到选择器的 keyframe(关键帧动画) 名称
animation-duration	规定实现动画所破费的工夫，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的提早。。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-fill-mode 属性规定动画在播放之前或之后，其动画成果是否可见。

值	形容
none（默认）	动画执行前或执行后动画款式都不会利用到元素上
forwards	当动画实现后，放弃最初一个属性值（在最初一个关键帧中定义）。
forwards	在 animation-delay 所指定的一段时间内，在动画显示之前，利用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被利用。