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仿造window7的开始菜单
Jun 17 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
又一个php 分页类实现代码
2009/12/03 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php中常用的预定义变量小结
2012/05/09 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
普天C++笔试题
2016/03/20 面试题
房地产广告词大全
2014/03/19 职场文书
单位委托书格式范本
2014/09/29 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书