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实现轮播图效果实例
May 04 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python 占位符的使用方法详解
2019/07/10 Python
python Pillow图像处理方法汇总
2019/10/16 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
大学生毕业评语
2014/12/31 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
教师远程培训心得体会
2016/01/09 职场文书