精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

transition属性是一个简写属性,用于设置四个过渡属性

transition-property :指定要过渡的css属性

transition-duration: 指定完成过渡花费的时间

transition-timing-function: 指定速度效果的速度曲线

transition-delay:指定过渡效果何时开始

属性可以分开写,也可以放在一起写,放在一起写即

transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间;

注:始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。transition可以和transform同时使用。

transition-timing-function 的五种取值

linear:匀速

ease: 默认,动画以低速开始,然后加快,在结束前变慢。

ease-in:缓慢开始(加速)

ease-out:缓慢结束(减速)

ease-in-out:缓慢开始,缓慢结束(先加速后减速)

触发过渡

单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发,可触发的方式有:
:hoever :focus :checked 媒体查询触发 JavaScript触发

局限性

(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

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

实例参考:纯CSS实现鼠标hover放到图片上图片等比例放大

Tags:CSS3 transition