欢迎大家来到IT世界,在知识的湖畔探索吧!
动画（animation）是CSS3具有颠覆性的特征之一，可以设置多个节点来精确控制一个或一组动画。
一.基本使用
1.定义动画：
用@keyframes定义动画
@keyframes 动画名称{欢迎大家来到IT世界,在知识的湖畔探索吧!
欢迎大家来到IT世界,在知识的湖畔探索吧! 0%{
width:100px;欢迎大家来到IT世界,在知识的湖畔探索吧!}
100%{ width：200px;}2.使用调用动画：
调用动画
animation-name:动画名称；
持续时间
animation-duration：持续时间；
二.属性介绍
@keyframes:规定动画。
animation：所用动画属性简写，除了animation-play-state属性。
animation-name:规定动画@keyframes动画名称。
animation-duration：规定动画完成一个周期所花费时间，默认为零。
animation-tining-function：规定动画曲线，默认为ease。
animation-delay：动画何时开始，默认为0。
animation-iteration-count：规定动画播放次数，默认为0，还有infinite（无限）。
animation-direction:规定动画是否在下一周期逆向播放，默认“normal”，alternate逆向播放。
animation-play-state：规定动画是否正在运行或暂停，默认“running”，还有“pause”。
animation-fill-mode：规定动画结束后的状态，保持forwards,回到起始backwards。
三.小熊代码演示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background-color: #ccc; } div { position: absolute; width: 420px; height: 420px; background: url("https://github.com/Zhoupipipipipipi/Svg/blob/master/image/bear.png?raw=true") no-repeat; animation: bear 1s steps(7) infinite, move 3s forwards; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -2940px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 50%; transform: translateX(-50%); } } </style></head><body> <div></div></body></html>图片来自博客“周皮皮皮皮皮皮”；https://github.com/Zhoupipipipipipi/Svg/blob/master/image/bear.png?raw=true演示视频：
感谢批评建议（学习动力），祝大家元宵节快乐！！！
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/18034.html
