一)Keyframes被称为关键帧,用来定义动画内容。
语法:
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
二)
animation-name 属性主要是用来调用 @keyframes 定义好的动画。
语法:animation-name: none | IDENT[,none|DENT]*;
三)
animation-duration 主要用来设置CSS3动画播放时间,用法和transition-duration类似,是用来指定元素播放动画所持续的时间长。
语法:animation-duration: <time>[,<time>]*
四)
animation-timing-function 属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。
语法:animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
ease 默认值,速度由快到慢,逐渐变慢
linear 恒速
ease-in 渐显效果,加速速度越来越快
ease-out 渐隐效果,减速速度越来越慢
ease-in-out 渐显渐隐效果,先加速再减速
五)
animation-delay 属性用来定义动画开始播放的时间,用来触发动画播放的时间点。和transition-delay属性一样。
语法:animation-delay:<time>[,<time>]*
六)animation-iteration-count属性主要用来定义动画的播放次数。
语法:animation-iteration-count: infinite | <number> [, infinite | <number>]*
常为整数,也可以使用带有小数的数字,默认值为1,意味着动画将从开始到结束只播放一次。取值为infinite,动画将会无限次的播放。
七)animation-direction属性主要用来设置动画播放方向。
语法:animation-direction:normal | alternate [, normal | alternate]*
normal是默认值,动画的每次循环都是向前播放;alternate动画播放在第偶数次向前播放,第奇数次向反方向播放。
八)animation-play-state属性主要用来控制元素动画的播放状态。
running默认值,类似于音乐播放器,可以通过paused将正在播放的动画停下来,也可以通过running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放。另外如果暂停了动画的播放,元素的样式将回到最原始设置状态。
九) animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none、forwards、backwords和both。
none:默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处
forwards:表示动画在结束后继续应用最后的关键帧的位置
backwards:会在向元素应用动画样式时迅速应用动画的初始帧
both:元素动画同时具有forwards和backwards效果
<div><span></span></div>
@-webkit-keyframes move {
0%{
transform: translateY(90px);
}
15%{
transform: translate(90px,90px);
}
30%{
transform: translate(180px,90px);
}
45%{
transform: translate(90px,90px);
}
60%{
transform: translate(90px,0);
}
75%{
transform: translate(90px,90px);
}
90%{
transform: translate(90px,180px);
}
100%{
transform: translate(90px,90px);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
transform: translateY(90px);
animation-name: move;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:paused;
-webkit-animation-name: move;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay: .2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:paused;
}
div:hover span {
animation-play-state:running;
-webkit-animation-play-state:running;
}
这里动画也可以简写:
span{animation: move 10s ease-in 2s infinite alternate paused};
效果展示:
http://jsfiddle.net/ffg2L548/
分享到:
相关推荐
css动画 css-animation-101.pdf
jquery绑定 css3 animation-keyframes关键帧动画,,,,,,,
NULL 博文链接:https://rainsilence.iteye.com/blog/1190204
CSS3动画--animation属性(name和duration)-附件资源
规定至少以下两项CSS动画属性,可以实现动画效果: 动画名称 animation-name 动画时长 animation-duration 可以使用简写属性animation同时设置动画名称和动画时长 2 第一步:设置动画规则 第二步:选择器绑定动画...
CSS3实现烟花特效-图片+css
css3 animation酷炫的文字动画特效 css3 animation酷炫的文字动画特效
Chrome插件Css3动画快速给页面加上炫酷酷css3动画的chrome插件。...3.自主打造npm install -g vue-cli git clone https://github.com/vace/css3-animation-generator cd css3-animation-generator && npm i
css动画说明,包括详细用法,详细参数,兼容性等
animation Transform CSS3 、 @keyframes利用C3的动画效果写的一些小的动画效果
css3弹力球动画animation属性制作3D弹力球弹跳动画效果
通过使用css3新增的动画(animation)属性来完成,主要采用的是steps,steps()是一个timing function,允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡。
纯css3 animation动画属性点击loading加载动画 纯css3 animation动画属性点击loading加载动画
四个基本的CSS3动画图片,分别是图片放大特效,图片X轴翻转,Y轴翻转,Z轴旋转
Animate.css拥有多款文字特效的css3动画库效果源码,是一段拥有数十款文字特效的css3动画库代码,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出...
jquery css3 animation属性多个页面切换动画 jquery css3 animation属性多个页面切换动画
CSS Animation 101:从零开始介绍 CSS 动画开源电子书
animation.css实现动画旋转特效是一款基于CSS3实现的酷炫的动画旋转特效代码
html-css-animation-filter