在以往,想在HTML上实现动画效果,要不就用被乔布斯恨死的了Flash 动画,要不就用网页动画图像或者JavaScript 实现效果。在CSS3之后,就可以用CSS在HTML上实现动画了。
要创建 CSS3 动画,你需要了解 @keyframes 规则。现在 @keyframes 创建动画时,需将其绑定到一个选择器,否则动画不会有任何效果。
13.1 原生创建动画
用CSS3原生代码创建动画,语法是@keyframes animationname {keyframes-selector {css-styles;}},其中animationname :必需,动画的名称;
keyframes-selector:必需,动画时长的百分比合法的值:0-100%, from(与 0% 相同),to(与 100% 相同)
css-styles:必需,一个或多个合法的 CSS 样式属性。
动起来
输出结果
13.2 动画库创建
如果每次都要自己手动用CSS去创建动画,那效果太低了。为此,有人专门专门开发了CSS动画库animation.css。可以在线https://animate.stylek看效果,它里面的动画效果,可以满足大多数需求了。下载https://github.com/animate-css/animate.css里的animate.min.css文件,放到HTML文件相同目录下。
用动画库实现动画 老陈说编程,动画效果行
输出结果
好了,有关CSS动画效果的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注今日头条:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。
#前端##HTML5##CSS##程序员##Web#