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 ...
随机推荐
- ASP.NET知识总结（8.AJAX异步）
AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML. 指一种创建交互式网页应用的网页开发技术. 不是指一种单一的技术,而是有机 ...
- Android使用CountDownTimer倒计时
1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android ...
- [项目]WebService涉及到的部分核心代码
前言: 博客园似乎不太喜欢设计模式的东西,一连写了几篇设计模式的东西,都没什么人气,也许是写的水平有些不够,另外设计模式属于内功,怎们都得修炼一下,否则,设计混乱,不成体系,对于大型项目来说,就会显 ...
- 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】
单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...
- SOUI与WTL
如果你想使用SOUI最好有点WTL基础,一点点就行了. SOUI不依赖于WTL,但是SOUI的编码风格基本和WTL一样的:SOUI抄袭了WTL的消息处理形式,SOUI的事件处理也是模仿了WTL的消息映 ...
- TMS320F28027/26/23/22/21/20芯片解密单片机破解原理！
TMS320F28027/26/23/22/21/20芯片解密单片机破解 TMS320F2802系列芯片解密型号: TMS320F28027F.TMS320F280270.TMS320F28027.T ...
- ODAC (odp.net) 从开发到部署
2013-09-30 16:08 4097人阅读 评论(0) 收藏 举报 分类: Oracle(10) 版权声明:本文为博主原创文章,未经博主允许不得转载. 1. 确定你开发机和服务器的操作系统是 ...
- 2016 Multi-University Training Contests
2016 Multi-University Training Contest 1 2016 Multi-University Training Contest 2 2016 Multi-Univers ...
- unity3D项目中如何避免硬代码(C#)
平时做项目,代码中是不允许出现硬代码的,一般我们是怎么处理的呢? 那么硬代码又是什么呢? 我们俗称的硬代码:eg: label.text = "欢迎来到梦幻岛"; 这样我们俗 ...
- [资料分享]SQL Server 2016/2014/2012/2008简体中文企业版下载+对应补丁
为什么只提供企业版下载呢?因为不管你是学生还是工作研究人员,企业版都是功能最为齐全的一个版本,比如企业版都集成了SQL Server Management Studio管理界面(俗称企业管理器的可视化 ...