首页 > 程序开发 > web前端 > HTML/CSS >

css3的简单动画效果(animation和transition)

2017-07-20

css3的简单动画效果(animation和transition)。transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

(1)平移translate(x值,y值)

(2)旋转rotate(角度) ex:rotate(45deg);

正数为顺时针旋转。

(3)倾斜skew(水平倾斜,垂直倾斜) ex:skew(20deg,3odeg)

原点为盒子的中心点(水平方向为y轴,垂直方向为x轴)

\

(4)缩放scale(缩放倍数)

动画 transition

transition(property(名称),duration(花费的时间),timing-function(速度),delay(延迟) )

请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

ex: transition(all,2s,ease)

timing-function:

linear:以相同的速度从开始到结束;

ease:慢——快——慢

ease-in:慢开始的过度

动画 animation

aimation( 名称 时间 延迟时间 运动方式(速度的选择) 循环次数 反方向是否也有动画)

相关文章
最新文章
热点推荐