共计 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 属性是一个简写属性,用于设置六个动画属性:
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
animation-fill-mode 属性规定动画在播放之前或之后,其动画成果是否可见。
值 | 形容 |
---|---|
none(默认) | 动画执行前或执行后动画款式都不会利用到元素上 |
forwards | 当动画实现后,放弃最初一个属性值(在最初一个关键帧中定义)。 |
forwards | 在 animation-delay 所指定的一段时间内,在动画显示之前,利用开始属性值(在第一个关键帧中定义)。 |
both | 向前和向后填充模式都被利用。 |
正文完