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 ...
随机推荐
- 解决fedora25安装vmware12问题:
运行vmware需要几个工具.gcc 编译工具是必须要有的.dnf groupinstall “Development tools“rpm -qa |grep kernel-headersrpm -q ...
- C# Lamda中类似于SQL 中的 In 功能
首先,在程序中接受一个数组 例如:int[] s=[1,2,3]; 在Lamda表达式中使用如下: db.userinfo.where(u=>s.Contains(u.id)); 等同于sql语 ...
- html BOM、DOM
- python中的反射
在绝大多数语言中,都有反射机制的存在.从作用上来讲,反射是为了增加程序的动态描述能力.通俗一些,就是可以让用户参与代码执行的决定权.在程序编写的时候,我们会写很多类,类中又有自己的函数,对象等等.这些 ...
- DataTable 只保留想要的几列
using System; using System.Collections; using System.Configuration; using System.Data; using System. ...
- 如何用 SQL Tuning Advisor (STA) 优化SQL语句
在Oracle10g之前,优化SQL是个比较费力的技术活,不停的分析执行计划,加hint,分析统计信息等等.在10g中,Oracle推出了自己的SQL优化辅助工具: SQL优化器(SQL Tuning ...
- JDBC URL FOR ORACLE, wrong or correct, how do you know? ORA-12505
JDBC URL FOR ORACLE, wrong or correct, how do you know? INSTANCE SID by ":" jdbc:oracle:th ...
- C# 利用 DbUp 通过多个SQL Script文件完成对数据库的更新
详细流程请参考(本人测试过,很好用): http://dbup.github.io/ 配置截图: 程序如下: static int Main(string[] args) { var connecti ...
- Git 创建本地仓库
前面已经搭好环境了,现在我们缺的是一个管理版本控制的仓库.这次的实验是在电脑本地创建本地仓库.指定路径 默认的位置是在你所安装Git的目录下.Git的仓库你可以建在你电脑的任何目录下(最好不要包含有中 ...
- .NET string字符串的截取、移除、替换、插入
在实际开发中经常要用到string的各种截取等操作,在这里总结自己认为经常出现的.NET 字符串的截取.移除.替换.插入操作,方面以后查阅. 前台代码: <%@ Page Language=&q ...