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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
网页javascript精华代码集
2007/01/24 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python实现内存监控系统
2021/03/07 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
工地安全质量标语
2014/06/07 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
门卫岗位职责
2015/02/09 职场文书
《叶问2》观后感
2015/06/15 职场文书
小学校长开学致辞
2015/07/29 职场文书
安全生产会议制度
2015/08/06 职场文书
工伤调解协议书
2016/03/21 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers