CSS3 是如何制作过渡动画的,一起来看看吧!

transition:

过渡动画:是从一个状态 渐渐的过渡到另外一个状态

帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

 过渡 (transition)是CSS3 中具有颠覆性的特征之一,我们可以在不使用flash动画或者JavaScript 的情况下,当元素从一种方式变换为另一种方式时为元素添加效果。

语法格式:

transition: transition-property transition-duration transition-timing-function transition-delay;

如果有多组属性变化,还是用逗号隔开。

属性&描述

transition:简写属性,用于在一个属性中设置四个过渡属性。

transition-property:规定应用过度的 CSS 属性的名称 (eg. width height)

transition-duration:定义过渡效果花费的时间。默认值是0。

transition-timing-function:规定过度效果的时间曲线。默认是 “ease”。

transition-delay:规定过渡效果何时开始。默认是 0。

要想所有的属性都变化过渡,写一个all 就可以。

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

image

transform:

transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform transform 变换 变形的意思

属性值:

translate(x,y)移动

scale(x,y)缩放

rotate(deg)旋转 (deg为单位,不能丢)

skew(deg,deg)倾斜

transform-origin调整元素转换变形的原点

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容