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+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php入门小知识
2008/03/24 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
vue实现留言板todolist功能
2017/08/16 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python3中的json模块使用详解
2018/05/05 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python实现学生通讯录管理系统
2021/02/25 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
学年自我鉴定
2014/01/16 职场文书
教师个人发展总结
2015/02/11 职场文书
办公室个人总结
2015/02/28 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL