css(4)animation动画总结
文章目录
- 前言
- 一、@keyframes关键帧
- 1.from{}to{}
- 2.0%{}100%{}
- 二、animation动画
- 1.animation-name
- 2.animation-duration
- 3.animation-timing-function
- 4.animation-delay
- 5.animation-iteration-count
- 6.animation-fill-mode
- 三、例子，方块掉落
- 总结
前言
学好css3的动画animation属性很重要，我们可以做到许多类似的效果（平移，旋转，缩放）
参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
一、@keyframes关键帧
通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤
参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
1.from{}to{}
@keyframes name{from {background: red;}to {background: yellow;}
}
from等价于0%，on等价于100%
2.0%{}100%{}
@keyframes name{0% {background: red;}100% {background: yellow;}
}
在这种格式下，可以设置从0%-100%任意阶段
二、animation动画
animation: = 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
以下分别进行总结
1.animation-name
animation-name: [ none | ]
动画的名字，也是上面@keyframes之后需要填写的动画名
2.animation-duration
animation-duration: 动画的播放时长，默认值0s
3.animation-timing-function
animation-timing-function: #
定义动画的缓动函数,默认值ease
ease 全程缓慢
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out 缓慢开始结束
linear 线性变化/平均速度
4.animation-delay
animation-delay: infinite |
定义动画的执行开始的延迟时间，默认0s
5.animation-iteration-count
animation-iteration-count: #
动画播放的次数，默认1
infinite: 无限次循环
6.animation-fill-mode
animation-fill-mode: none | forwards | backwards | both
设置CSS动画在执行之前和之后如何将样式应用于其目标，默认none
forwards: 目标将保留由执行期间遇到的最后一个关键帧计算值
backwards: 动画将在应用于目标时立即应用第一个关键帧中定义的值
三、例子，方块掉落
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>.quare {background-color: red;position: absolute;width: 200px;height: 200px;left: 200px;top: 0px;animation: fall 2s 1s ease-in forwards;/* 相同的定义方法animation-name: fall;animation-duration: 2s;animation-delay: 1s;animation-timing-function: ease-in;animation-fill-mode: forwards; */}@keyframes fall {from {top: 0px;}to {top: 200px;}}style>
head><body><div class="quare">div>
body>html>
总结
常用动画属性总结，个人学习笔记，每天进步多一点
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！