Css3关键帧动画
@keyframes设置动画规则，可以理解为一个剧本；
1.name动画的名字必需填写 2.可以使用百分比0%-100%或者from...to...必填内容； 3.需要变化css的样式；必需；
animation所有动画的简写属性排序如下：
animation-name动画的名字 / animation-duration 持续时长 / animation-timing-function规定动画的速度曲线。/
animation-delay动画定时 /animation-iteration-count动画的运动的次数 /animation-direction属性定义是否应该轮流反向播放动画。
animation-timing-function：规定动画的运动速度曲线。
属性有如下几种：linear匀速进行 ease 开始低速逐渐加快结束时候再变慢
ease-in动画以低速开始 ease-out动画以低速结束
ease-in-out动画以低速开始和结束 cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-direction：normal默认属性 顺序播放/alternate轮流反向播放。
animation-iteration-count：n设置次数；infinite无限次循环播放；
animation-play-state：默认running是正常播放 /paused暂停动画 需要结合js代码才能实现
animation-fill-mode：定义动画结束之外的状态：none 不改变默认行为 /forwards当动画完成，保留最后一个属性值
/backwards 定义在animation-delay中这一段时间，应用开始的属性值，在动画开始之前的状态。
both向前和向后填充模式都被应用（意思是以上2种方法同时会被使用。）
下面是个小实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="file:///C|/Users/xz/Desktop/学习工具/images/Untitled-2.css">
</head>
<body>
<div class="dh">
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div{
width:200px;
height:400px;
background:rgba(153,102,0,0.8);
animation-name:mydh;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mydh{
0%{
width:200px;
height:400px;
margin-top:100px;
background-color:#0F3;
}
50%{
width:300px;
height:200px;
background-color:#CC9;
margin-top:250px;
}
100%{
width:200px;
height:400px;
background-color:#C36;
margin-top:300px;}
}
Css3关键帧动画的更多相关文章
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- css3 实现动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 <!DOCTYPE html> <html lang= ...
- CSS3过渡动画&关键帧动画
一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3之动画相关
CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3 之动画及兼容性调优
由于CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持. 所以有时候一些简单的动画效果,还只是用js代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...
随机推荐
- xBIM WeXplorer xViewer 基本应用
目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...
- Linux expect自动登录ssh,ftp
[http://blog.51yip.com/linux/1462.html#] #!/usr/bin/expect -f set ip 192.168.1.201 set password meim ...
- Vue.js依赖收集
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- Sqlserver将数据从一张表插入到另一张表
1.如果是整个表复制表达如下: insert into table1 select * from table2 2.如果是有选择性的复制数据表达如下: insert into table1(colum ...
- C#将制定文件夹下的PDF文件合并成一个并输出至指定路径
/// <summary> /// 将源路径下的PDF合并至目标路径下 /// </summary> /// <param name="SourcePath&q ...
- ASP.NET与ASP.NET MVC 的差异、优点及缺点
众所周知,在微软的编程语言发展历史中,asp.net是不得不提的一个重要的发展阶段,它具有快速开发.层级明确的优点,但最大的缺点,同时也是它逐渐被废弃的原因就是,页面加载的viewstate过于庞大, ...
- 浏览器输入URL到响应页面的全过程
B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通 ...
- RMI远程服务调用
数据库:info.sql /* Navicat MySQL Data Transfer Source Server : yuanzhen Source Server Version : 50713 S ...
- js获取对象长度和名称
1.对象的长度不能用.length获取,用js原生的Object.keys可以获取到 var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14' ...
- hdu1556 Color the ball 线段树区间染色问题
都是老套路了,如果n=5,要把区间[1,4]染色,可以递归去染区间[1,3]和区间[4,4],如果区间相等就自加,不相等继续递归寻找对应区间. 打印结果时,把所有到达叶节点包含i的区间值相加,就是最后 ...