可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张。
对象的动画名称,以便后续设置动画属性时使用
默认为none,如果设置的话即为要设置动画的关键帧的名字
后续对该元素设置动画时,要用@keyframes,设置起始的样式(from)和终止的样式(to)
动画持续的时间(播放完成所花时间)
默认值为0,可设置单位为秒(s)或毫秒(ms)
动画的过度方式
常用的有:linear(线性过渡)、ease(平滑过渡)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)
如有复杂需求,要设置贝塞尔曲线(cubic-bezier(数值1,数值2,数值3,数值4)),其中四个数值范围为0-1
动画开始前等待时间(该时间不包括在动画放映时间内)
默认值为0,可设置单位为秒(s)或毫秒(ms),如设置负值则立即开始动画
注:设置的时间带有小数点时,建议省去整数部分,如0.5写成.5
动画循环次数
值为数字,默认为1,也可设置infinite(无限循环)
动画循环时的方向
可设置的值有:none(保留原有样式,默认值)、reverse(反向)、alternate(先正常再反向并交替进行)、alternate-reverse(先反向再正常并交替进行)
其中alternate和alternate-reverse必须在循环次数不为1时才生效
动画不播放(已经放完/有延迟没播放)时的元素样式
可设置的值有:none(没有样式,默认值)、forwards(结束时状态)、backwards(开始时状态)、both(同时设置开始和结束时状态)
动画状态,即播放/暂停
可设置的值有:running(播放,默认值)、pause(暂停)
其中必须设置name和duration
解析时,默认把第一个字符串属性值解析为name,第一个带有时间的属性值解析为duration,之后一个带有时间的属性值解析为delay
/*按照每个元素来写的动画属性*/
div{
width:100px;height:100px;
animation-name:outside;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate-reverse;
animation-fill-mode:forwards;
animation-play-state:pause;
}
@keyframes outside{
from{transform:translateY(0px);}
to{transform:translateY(1000px);}
}
通过控制关键帧来改变动画的播放效果,对手机端必须加上-webkit-
其中0%和100%可用from和to代替
div{
width:100px;height:100px;background:black;
animation:here 5s linear infinite alternate-reverse;
}
@-webkit-keyframes here{
0% {capacity:0;}
25% {capacity:0.25;}
50% {capacity:0.5;}
75% {capacity:0.75;}
100% {capacity:1;}
}
小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?
通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。
CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。
基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点?这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的。
loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。CSS的animation可以做出大多数的loading
一个元素不设置高度时,height的默认值是 auto,浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 CSS3动画呢?可以通过JS 获取精确的 height 值,或者使用max-height 代替 height。
主要讲的是怎样制作流畅动画,特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点;接着会着重介绍用css3制作动画的注意事项,包括:用canvas、css3、jquery制作动画;css3在移动端卡顿问题;动画过程有闪烁问题(一般出现在动画开始)
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式
CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。
在CSS3中引入了全新的动画语法,它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的,而使用动画库和生成器则可以帮助你完美处理这一切
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!