CSS篇之动画（2）
animation-name（自定义动画）
name为动画名称。不要用中文，尽量用与动画相关的名称。元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义。简单理解@keyframes它就是关联，如果你不用@kedyframes里面的效果套用到你要的动画里面，你的动画就是一个不会动的图片。
div{
-webkit-animation-name：fromofright；（加了兼容前缀只适用）
ainmation-name：fromofright；
}
keyframes（关键帧）
关键帧相当于一个会运动的画面它们其实是有一个一个画面不停地在播放的速度形成的一个画面给人来动感的一组图片。而关键帧就是锁定这些图片的重要属性。
帧数越多画面越流畅。
@-webkit-keyframes 动画名{
from{
left：0px；
}
to{
left：400px；
}
}
百分号写法
@-webkit-keyframes 动画名{
0%{
left：0px；
}
50%{
left：100px；
}
100%{
left：0px；
}
}
注意百分号的写法开头开始关键帧必须为0%，结束必须为100%
animation-time（动画时间）
动画时间理解为一个完整动画所用的时长是多少这就是这个动画的时间。
div{
-webkit-animation-time：1s；
}
结合上面三个知识点我做出了一个普通图片位移的效果然后回归到原位的效果。
正常动画
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正常动画</title>
<style type="text/css">
.img{
width: 50px;
height: 50px;
background: green;
border-radius: 6px;
-webkit-animation-name:yidong ;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 99;/*循环播放*/
} @-webkit-keyframes yidong{
from{
margin-left:0px;
}
to{
margin-left:200px
}
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
animation-timing-function（动画过渡速度）
ease： 逐渐变慢，（默认属性）等于ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
正常动画
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正常动画</title>
<style type="text/css">
.img2{
width: 50px;
height: 50px;
background: green;
border-radius: 6px;
-webkit-animation-name:yidong ;
-webkit-animation-duration:4s;
-webkit-animation-iteration-count: 99;/*循环播放*/
} @-webkit-keyframes yidong{
from{
margin-left:0px;
}
to{
margin-left:350px
}
}
</style>
</head>
<body>
<div class="img2"></div>
</body>
</html>
linear ：匀速，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)。
线性过渡
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>线性过渡</title>
<style type="text/css">
.img3{
width: 50px;
height: 50px;
background: yellow;
border-radius: 5px;
-webkit-animation-name:xianxing;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 99;/*循环播放*/
} @-webkit-keyframes xianxing{
from{
margin-left:0px ;
}
to{
margin-left:350px ;
}
}
</style>
</head>
<body>
<div class="img3"></div>
</body>
</html>
ease-in ：加速，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)。
加速动画
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加速动画</title>
<style type="text/css">
.img4{
width:50px;
height:50px;
background: dodgerblue;
border-radius: 5px;
-webkit-animation-name: jiasu;
-webkit-animation-timing-function:ease-in;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 99;/*循环播放*/
} @-webkit-keyframes jiasu{
from{
margin-left: 0px;
}
to{
margin-left: 350px;
}
}
</style>
</head>
<body>
<div class="img4"></div>
</body>
</html>
ease-out ：减速，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)。
减速
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>减速</title>
<style type="text/css">
.img5{
width: 50px;
height: 50px;
background: lightcoral;
border-radius: 5px;
-webkit-animation-name:jiansu;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 99;/*循环播放*/
} @-webkit-keyframes jiansu{
from{
margin-left: 0px;
}
to{
margin-left: 350px;
}
}
</style>
</head>
<body>
<div class="img5"></div>
</body>
</html>
ease-in-out：先加速后减速，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)。
先加速后减速
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>先加速后减速</title>
<style type="text/css">
.img6{
width: 50px;
height: 50px;
background: gold;
border-radius: 5px;
-webkit-animation-name:xian ;
-webkit-animation-timing-function: ease-in-out ;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 99;/*循环播放*/
} @-webkit-keyframes xian{
from{
margin-left: 0px;
}
to{
margin-left: 350px;
}
}
</style>
</head>
<body>
<div class="img6"></div>
</body>
</html>
animation-delay（动画延迟时间）
本来是一个1秒钟播放的动画，我想弄成1秒后再播放，这就是动画延迟。
div{
-webkit-animation-delay：1s / 可以添加动画过渡速度的值；
}
继续用上面动画过渡速度例子添加延迟播放时间（请刷新观看）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.img7{
width: 50px;
height: 50px;
background: green;
border-radius: 5px;
-webkit-animation-name: yanchi;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s;
} @-webkit-keyframes yanchi{
from{
margin-left: 0px;
}
to{
margin-left:350px ;
}
}
</style>
</head>
<body>
<div class="img7"></div>
</body>
</html>
animation-ieration-count（动画播放次数）
写法：animation-ieration-count：次数用数字/infinite(循环播放播放N次)
例子都用到了此属性
animation-direction（动画顺序）
设置动画播放方向
normal：正常方向（默认）
reverse：反方向运行
alternate：动画线正常运行在反方向运行，并持续交替运行
alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行
div{
-webkit-animation-direction：normal；
animation-direction：normal；
}
例子
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
width: 100px;
height: 100px;
background: yellow;
margin: 5px;
-webkit-animation-name: leftofright2;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite; }
/*可以直接用于元素属性里面*/
.reverse{
-webkit-animation-direction: reverse;
background: black;
} .alternate{
-webkit-animation-direction: alternate;
background: blue;
} .alternate-reverse{
-webkit-animation-direction: alternate-reverse;
background: blueviolet;
} @-webkit-keyframes leftofright2{
from{
margin-left:0 ;
}
to{
margin-left:400px ;
}
}
</style>
</head>
<body>
<div class="one"></div>
<div class="one reverse"></div>
<div class="one alternate"></div>
<div class="one alternate-reverse"></div>
</body>
</html>
animation-play-state（动画的状态）
animation-play-state：running|paused
running：运动
paused：暂停
div：hover{
-webkit-animation-play-state：paused；
animation-play-state：paused；
}
鼠标移动到背景上将停止动画播放
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.yi{
width: 100px;
height: 100px;
background: bisque;
margin: 5px;
-webkit-animation-name: dong;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
} .yi:hover{
-webkit-animation-play-state: paused;
} @-webkit-keyframes dong{
from{
margin-left:0 ;
}
to{
margin-left:400px ;
}
}
</style>
</head>
<body>
<div class="yi"></div>
</body>
</html>
animation-fill-mode（动画时间之外的状态=动画播完后动画显示是怎么样）
animation-fill-mode：none|forwards|backwards|both
none：默认值。不设置对象动画之外的状态。
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束后开始的状态
div{
-webkit-animation-fill-mode：both；
animation-fill-mode：both；
}
animation（动画符合属性）
animation：[animation-name] | [animation-duration] | [animation-timing-function] | [animation-delay] | [animation-iteraion-count]|[animation-direction]|<single-animation-fill-mode>|<single-animation-play-state>[,*]
div{
-webkit-animation:动画名字 动画时长 动画过渡速度 动画时间外的状态
}
CSS篇之动画（2）的更多相关文章
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...
- 面试题2：BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内 ...
- BAT及各大互联网公司前端笔试面试题--Html,Css篇
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...
- BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 ...
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- CSS篇（上）
紧接着HTML篇的CSS篇开啦,老铁们快来围观... 1.介绍一下标准的CSS盒子模型?低版本IE的盒子模型有什么不同? 1>有两种:IE盒子模型 W3C盒子模型 2>盒模型:内 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- 基因匹配（bzoj 1264）
Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种碱基排列而成(地球上只有4种),而更奇怪的是,组成DNA序列的每一种碱 ...
- 修改MySql 数据默认存储路径
1. cmd进入控制台 net stop mysql 2.复制原来数据库目录到新目录 复制C:\ProgramData\MySQL\MySQL Server 5.5\中的data目录到 D:\Prog ...
- js原声快速实现选项卡
var Rea = document.getElementById("rep"); var ReaAll = Rea.querySelectorAll("li" ...
- mysql安装一 --- 源码包安装
1.登陆http://www.mysql.com/ 或者 www.oracle.com 2. 3. 4. 上面如果不能加载,禁用代理软件 5. 6. 7. 8. 9.上传 10.md5校验安装包的完整 ...
- jsp include flush true
设置flush为true,就是说,如果你的缓冲区的内容很多了,就将数据读出,以免数据泄漏,造成错误服务器端页面缓冲,大致的意思是,在将生成的HTML代码送到客户端前,先在服务器端内存中保留,因为解释J ...
- 桥接模式/bridge模式/对象结构型
意图 将抽象部分与它的实现部分分离,使它们都可以独立的变化. 动机 当一个抽象类有多个实现时,通常用继承来协调它们.但是继承机制将抽象和实现固定,难以对抽象部分和实现部分独立地进行修改.扩充和重用. ...
- 在wex5平台grid显示问题
新建的时候必须自动生成一个主表id,然后grid里面的column里面的editable必须是true,input里面的bind-ref得绑定值.
- Material Design兼容包的使用
为了方便自己以后的查找,于是就写了这个博客,废话就不多说,开始干: 导入: compile 'com.android.support:appcompat-v7:24.2.1' compile 'com ...
- 51nod 1712 区间求和
题意 给你一个长度为 \(n\) 的序列,定义这个序列的权值为 $ \sum_{1 \leq i<j \leq n} a_j - a_i $. 现在给你一个长度为 \(n\) 的序列,当$ a_ ...
- pointer-events 使用场景
最近做一个简单移动web功能,可以左右滑动切换功能.如下图: 但是用户不知道可以滑动切换,所以需要提示用户可以滑动切换,那就添加了一个滑动动画. 滑动动画在最上层,所以当显示滑动提示显示的时候,用户切 ...