欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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); }
}

参考:

http://www.fly63.com/article/detial/6653

https://www.w3school.com.cn/cssref/pr_animation.asp