css---animation属性[email protected]属性添加动画
程序员文章站
2022-03-16 16:48:10
...
animation属性
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
值 | 描述 |
---|---|
animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。 |
animation-direction | 规定是否应该轮流反向播放动画。 |
@keyframes属性
@keyframes是css的一种规则,可以用来定义css动画的一个周期的行为,创建简单的动画。通过 @keyframes 规则,能够创建动画。
说明:创建动画的原理是,将一套 css 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 css 样式。以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。
实例---元素上下抖动动画
HTML代码
<div class="container">
<div class="demo shake" id="shake">抖一抖</div>
</div>
css代码
.container{
background-color: greenyellow;
width: 200px;
height: 200px;
}
.demo{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake { /* 垂直抖动 */
10%, 90% { transform: translate3d(0, -1px, 0); }
20%, 80% { transform: translate3d(0, +2px, 0); }
30%, 70% { transform: translate3d(0, -4px, 0); }
40%, 60% { transform: translate3d(0, +4px, 0); }
50% { transform: translate3d(0, -4px, 0); }
}
参考: