css3动画transition的使用和介绍

更新日期: 2017-11-30阅读: 2.9k标签: css3动画

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。在transition出现之前css是没有过渡效果的(时间轴),也就是所有的属性的变化都是即时完成。


transition是由4个属性的合体简写:它们分别是:

ransition-property – 过渡的CSS属性的名称,例如:opacity。
transition-duration – 定义过渡效果花费的时间。默认值为 0。
transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。
transition-delay -过渡效果何时开始。默认是 0。


实例:

效果:鼠标移动到div上,停留2秒后宽度由100px经1秒的时间变化到200px

<style> 
div{
 width:100px;
 height:100px;
 background:yellow;
 transition-property:width 1s linear 2s;
 -moz-transition:width 1s linear 2s;/* Firefox 4 */
 -webkit-transition:width 1s linear 2s;/* Safari and Chrome */
 -o-transition:width 1s linear 2s;/* Opera */
}
div:hover{
   width:200px;
}
</style>


由于transition是4中属性的简写,因此也可以写为:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}


transition的使用注意

1、目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。

2、不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果

3、transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。


transition的局限

1、transition需要事件触发,所以没法在网页加载时自动发生。

2、transition是一次性的,不能重复发生,除非一再触发。

3、transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

4、一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

5、CSS Animation就是为了解决这些问题而提出的。


链接: https://www.fly63.com/article/detial/202

如何写出高性能的CSS3动画

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

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

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

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

CSS3动画总结

常用特效/变换(transform)scale(2D缩放) rotate(2D旋转) translate(2D位移)skew(2D倾斜);keyframes这个属性用来定义一系列关键帧

点击更多...

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