您现在的位置:首页 >> 前端 >> 内容

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

时间:2017/7/20 11:21:36 点击:

  核心提示:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(1)平移translate(x值,y值)(2)旋转rotate(角度) ex:rotate(...

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

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

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

正数为顺时针旋转。

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

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

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

(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( 名称 时间 延迟时间 运动方式(速度的选择) 循环次数 反方向是否也有动画)

Tags:CS SS S3 3的 
作者:网络 来源:weixin_375