Css 3 动画
创始人
2024-02-20 20:51:37
0次
动画（animation）是css3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
动画的基本使用：
1 先定义动画
2 再使用（调用）动画
定义动画：用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
Width：100px；
}
100%{
Width：200px；
}
}
动画序列：
- 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
- 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词“from“和”to“，等同于0%和100%
使用动画：
div {width: 200px;height: 200px;background-color: pink;/* 2 调用动画 *//* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 1s;}
Document
相关内容
热门资讯
喜欢穿一身黑的男生性格（喜欢穿...
今天百科达人给各位分享喜欢穿一身黑的男生性格的知识，其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思（思春和发春是什...
本篇文章极速百科给大家谈谈发春是什么意思，以及思春和发春是什么意思对应的知识点，希望对各位有所帮助，...
网络用语zl是什么意思（zl是...
今天给各位分享网络用语zl是什么意思的知识，其中也会对zl是啥意思是什么网络用语进行解释，如果能碰巧...
为什么酷狗音乐自己唱的歌不能下...
本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?，以及为什么酷狗下载的歌曲不是...
家里可以做假山养金鱼吗（假山能...
今天百科达人给各位分享家里可以做假山养金鱼吗的知识，其中也会对假山能放鱼缸里吗进行解释，如果能碰巧解...
华为下载未安装的文件去哪找（华...
今天百科达人给各位分享华为下载未安装的文件去哪找的知识，其中也会对华为下载未安装的文件去哪找到进行解...
四分五裂是什么生肖什么动物（四...
本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物，以及四分五裂打一生肖是什么对应的知识点，希...
怎么往应用助手里添加应用（应用...
今天百科达人给各位分享怎么往应用助手里添加应用的知识，其中也会对应用助手怎么添加微信进行解释，如果能...
苏州离哪个飞机场近（苏州离哪个...
本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近，以及苏州离哪个飞机场近点对应的知识点，希望对各位有...
客厅放八骏马摆件可以吗（家里摆...
今天给各位分享客厅放八骏马摆件可以吗的知识，其中也会对家里摆八骏马摆件好吗进行解释，如果能碰巧解决你...