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 ...
随机推荐
- Android学习杂记
Jni接口学习资料: http://www.cnblogs.com/lsnproj/archive/2012/01/09/2317519.html classLoader和插件化: http://bl ...
- day4
第八单元 1)使用cat命令进行文件的纵向合并 文件的写入 2)wc -l显示有多少行 3)管道符 "|"将上一个命令交给下一个命令的参数 4)归档tar c:创建一个新的tar文 ...
- 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】
单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...
- 改变linux默认配色方案（dircolors和dircolors-solarized使用）
前言 前几天刚买了阿里云的云服务器,今天使用putty进入服务器,发现linux默认的bash配色实在太丑. 特别是文件夹显示为深蓝色,到了白天,和黑色背景一搭配,根本看不清文字. 好在在github ...
- 【vuejs小项目——vuejs2.0版本】组件化的开发方式
对于多张页面需要里存在相同模块,可以进行组建化的开发模式. 例如:此处需要一个评分标准组件,创建一个components/star/star.vue. 在需要引入该组建的页面上 import进去< ...
- 2016/12/3-问鼎杯线上赛1-1-Misc
拿到这道题目的文件,是一个压缩包,解压之后,我们看到一个1.txt文件,打开之后全是一堆数字,然后看到255,0,144等内容,估计是图片的像素值. 既然知道是像素值了,在CTF中,一般是8位比特的R ...
- #pg学习#postgresql的安装
1.按照官网给的步骤编译安装(Mac安装是比较容易的,相比Liunx) cd /Users/renlipeng/Desktop/postgresql-9.5.1 ./configure --prefi ...
- ajax返回json数据，对其中日期的解析
JS 对其格式化 方法如下 function ChangeDateFormat(d){ //将时间戳转为int类型,构造Date类型 var date = new Date(parseInt(d.ti ...
- 常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩 ...
- 代码中使用StoryBoard和DoubleAnimation的方法
TranslateTransformを対象に.DoubleAnimation型のアニメーションを使用して.TranslateTransform.Xプロパティを ”-1 * Imageコントロールの幅” ...