酷的html第13天 16天搞定前端CSS的动画后果酷

要创建 CSS3 动画，你须要理解 @keyframes 规则。
现在 @keyframes 创建动画时，需将其绑定到一个选择器，否则动画不会有任何效果。

13.1 原生创建动画

用CSS3原生代码创建动画，语法是@keyframes animationname {keyframes-selector {css-styles;}}，个中animationname ：必需，动画的名称；

keyframes-selector：必需，动画时长的百分比合法的值：0-100%， from（与 0% 相同），to（与 100% 相同）css-styles：必需，一个或多个合法的 CSS 样式属性。

酷的html第13天 16天搞定前端CSS的动画后果酷 jQuery

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>动起来</title> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: myfirst 5s; -webkit-animation: firstan 5s; / Safari and Chrome / } @keyframes firstan { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } @-webkit-keyframes myfirst / Safari and Chrome / { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } </style></head><body><div/></body></html>

输出结果

13.2 动画库创建

如果每次都要自己手动用CSS去创建动画，那效果太低了。
为此，有人专门专门开拓了CSS动画库animation.css。
可以在线https://animate.stylek看效果，它里面的动画效果，可以知足大多数需求了。
下载https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目录下。

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用动画库实现动画</title> <link rel="stylesheet" type="text/css" href="animate.min.css"/></head><body><main class="animate__animated animate__fadeInLeft"> 老陈说编程，动画效果行</main></body></html>

输出结果

好了，有关CSS动画效果的内容，老陈讲完了，如果以为对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。
你的转发和点赞，便是对老陈连续创作和分享最大的鼓励。