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 ...
随机推荐
- Linux下的DOS攻击
Linux下的DOS攻击 DOS是Denial of service的简称,即拒绝服务,造成Dos攻击行为被称为Dos攻击,其目的是使计算机或网络无法提供正常的服务.最常见的Dos攻击有计算机带宽攻击 ...
- PHP之session与cookie
1.session与cookie的关系 众所周知,session是存储在服务器端,cookie是存储在客户端,如果禁用了浏览器的cookie功能,很多时候(除非进行了特殊配置)服务器端就无法再读取se ...
- [Java 8] (10) 使用Lambda完成函数组合，Map-Reduce以及并行化
好文推荐!!!!! 原文见:http://blog.csdn.net/dm_vincent/article/details/40856569 Java 8中同时存在面向对象编程(OOP)和函数式编程( ...
- Delphi编程时候诡异地出现ORA-00937错误，记录解决它的思路和方法
首先需要说明,这个问题的出现需要几个前提:使用微软的Oracle驱动(使用Oracle自己的驱动不会出现这个问题).使用绑定变量法,使用Format等方式拼接SQL也不会出现这个问题,还有一些诡异的规 ...
- 【Java EE 学习 80 上】【WebService】
一.WebService概述 什么是WebService,顾名思义,就是基于Web的服务,它使用Http方式接收和响应外部系统的某种请求,从而实现远程调用.WebService实际上就是依据某些标准, ...
- Google之Chromium浏览器源码学习——base公共通用库(一)
Google的优秀C++开源项目繁多,其中的Chromium浏览器项目可以说是很具有代表性的,此外还包括其第三开发开源库或是自己的优秀开源库,可以根据需要抽取自己感兴趣的部分.在研究.学习该项目前的时 ...
- Python，ElementTree模块处理XML时注释无法读取和保存的问题
from xml.etree import ElementTree class CommentedTreeBuilder ( ElementTree.XMLTreeBuilder ): def __i ...
- npm设计代理
概述: 在需要代理才能上网的环境下,需要给npm设置代理才能完成安装 npm install 代理设置: 直接使用npm install会报错,如下: npm ERR! node v6.7.0 np ...
- [Linux] xargs 和 管道符的区别
今天刚好遇到需要使用xargs的情况,就来研究一下xargs 和 管道符的区别 举几个例子,下面两个语句执行后的结果是什么呢? 1. zhang$ find . -name "*.prope ...
- fullPage.js学习笔记
中秋节,一个人呆着,挺无聊的,还是学习最有趣,不论是什么,开阔视野都是好的. 参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看 ...