CSS3 @keyframes简单动画实现


Posted in HTML / CSS onFebruary 24, 2018

CSS3 @keyframes简单动画实现

定义:

通过 @keyframes 规则,能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,可以多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,应始终定义 0% 和 100% 选择器。

重要:兼容问题!@keyfrmes 不兼容IE 9 and 以及更早版本的浏览器.

语法:

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。 合法的值: 0-100% from(与 0% 相同) to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
//多个特性变化,用;隔开.

@-webkit-keyframes mymove{

0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

使用mymove动画方法:

选择器

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome, infinite表示无限次循环,也可设置次数n:
                                           animation-interation-count:n*/ 
}

总结:@keyframes与animation密切相关,如想透彻掌握,还需对照animation用法一起学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 #HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 #HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 #HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 #HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 #HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 #HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 #HTML / CSS
You might like
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
JS实现DOM删除节点操作示例
2018/04/04 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
python正则分析nginx的访问日志
2017/01/17 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
C#笔试题
2015/07/14 面试题
教师个人自我评价范文
2014/04/13 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
办公用房租赁协议书
2014/11/29 职场文书
迎新生欢迎词
2015/01/23 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript