CSS3动画:animation

更新日期: 2019-07-30阅读: 4.7k标签: css3动画

可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张。


animation属性值

1.animation-name

对象的动画名称,以便后续设置动画属性时使用

默认为none,如果设置的话即为要设置动画的关键帧的名字

后续对该元素设置动画时,要用@keyframes,设置起始的样式(from)和终止的样式(to)


 2.animation-duration

动画持续的时间(播放完成所花时间)

默认值为0,可设置单位为秒(s)毫秒(ms)


3.animation-timing-function

动画的过度方式

常用的有:linear(线性过渡)、ease(平滑过渡)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)

如有复杂需求,要设置贝塞尔曲线(cubic-bezier(数值1,数值2,数值3,数值4)),其中四个数值范围为0-1


4.animation-delay

动画开始前等待时间(该时间不包括在动画放映时间内)

默认值为0,可设置单位为秒(s)毫秒(ms),如设置负值立即开始动画

注:设置的时间带有小数点时,建议省去整数部分,如0.5写成.5


5.animation-interation-count

动画循环次数

值为数字,默认为1,也可设置infinite(无限循环)


6.ainmation-direction

动画循环时的方向

可设置的值有:none(保留原有样式,默认值)、reverse(反向)、alternate(先正常再反向并交替进行)、alternate-reverse(先反向再正常并交替进行)

其中alternate和alternate-reverse必须在循环次数不为1时才生效


7.animation-fill-mode

动画不播放(已经放完/有延迟没播放)时的元素样式

可设置的值有:none(没有样式,默认值)、forwards(结束时状态)、backwards(开始时状态)、both(同时设置开始和结束时状态)


8.animation-play-state

动画状态,即播放/暂停

可设置的值有:running(播放,默认值)、pause(暂停)


9.animation的简写

其中必须设置nameduration

解析时,默认把第一个字符串属性值解析为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);}
}


keyframes

通过控制关键帧来改变动画的播放效果,对手机端必须加上-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;}
}


链接: https://fly63.com/article/detial/4402

如何写出高性能的CSS3动画

小伙伴们在写CSS3动画时,会发现在手机上很多时候会感到卡顿,然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决,但是为什么开启GPU加速就能让动画顺滑呢?

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

css3动画transition的使用和介绍

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。

CSS3动画 相比JS Animation 哪个更快?

基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点?这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的。

css制作简单loading动画效果【css3 loading加载动画】

loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就完了。gif图也可以,但是加载时间比较长。CSS的animation可以做出大多数的loading

不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画

一个元素不设置高度时,height的默认值是 auto,浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 CSS3动画呢?可以通过JS 获取精确的 height 值,或者使用max-height 代替 height。

css3动画的性能优化_针对移动端卡顿问题

主要讲的是怎样制作流畅动画,特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点;接着会着重介绍用css3制作动画的注意事项,包括:用canvas、css3、jquery制作动画;css3在移动端卡顿问题;动画过程有闪烁问题(一般出现在动画开始)

CSS3动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式

css3动画,监控动画执行完毕

CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。

值得你收藏的10个CSS3动画工具

在CSS3中引入了全新的动画语法,它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的,而使用动画库和生成器则可以帮助你完美处理这一切

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!