CSS(三):CSS3动画初步准备
作者 Viliam | 发布于 2015-12-15
CSS

CSS3动画

CSS3动画属性分析:

一.旋转 rotate

用法:transform: rotate(45deg);

共1个参数“角度”,单位deg为角度,正数为顺时针旋转,负数为逆时针

二.缩放 scale

用法:transform: scale(0.5)
或者 transform: scale(0.5,2)

共2个参数“缩放倍数”:
只设置一个时表示水平垂直同时缩放的倍数
设置两个 第一个表示水平缩放倍数
第二个表示垂直缩放倍率

三.倾斜 skew

用法:transform: skew(30deg)
或者 transform: skew(30deg,10deg)

共2个参数“倾斜角度”:
只设置一个时表示表示水平方向的倾斜角度
设置两个 第一个表示水平方向的倾斜角度
第二个参数表示垂直方向的倾斜角度

四.移动 translate

用法:transform:translate(45px)
或者 transform: translate(45px,45px)

共2个参数“倾斜角度”,单位为px:
只设置一个时表示表示水平方向移动的距离
设置两个 第一个表示水平方向移动的距离
第二个参数表示垂直方向移动的距离

五.基准点 transform-origin

在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。

用法:transform-origin:10px 10px
或者 transform: translate(45px,45px)

共2个参数,第一个表示相对左上角原点水平方向的距离,单位px,
第二个表示相对左上角原点垂直方向的距离

两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

例如以左下角为基准点

六.动画过渡 transition

用法:transition:width 2s ease-in 0.5s

共4个参数,第一个表示过渡效果的CSS属性,可以是all,可以是width
第二个表示过渡效果需要的时间,单位为s(秒)或者ms(毫秒)
第三个表示速度曲线
第四个参数表示延迟几秒后开始 如上用法表示:改变宽度 用2s执行 ease-in 先快后慢 延迟0.5s开始执行

七.动画过渡第三个参数速度曲线 transition-timing-function

用法:transition:width 2s ease-in 0.5s transition-timing-function:ease-in

共1个参数,可以是linear,ease,ease-in,ease-out,ease-in-out cubic-bezier(n,n,n,n)
linear:表示以匀速从开始到结束过渡
ease:默认值,慢速开始,然后变快,然后慢速结束
ease-in:以慢速开始过渡
ease-out:以慢速结束过渡
ease-in-out:以慢速开始和结束过渡
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值。可能值为0-1的数值

linear

ease

ease-in

ease-out

ease-in-out

八.动画 animation

用法:animation: myAnimateName 2s ease-in 0.5s infinite normal 再结合keyframe

-webkit-keyframe myAnimateName{ 0%{ opacity:0; } 100%{ opacity:1; } }

共6个参数
第一个表示绑定选择器的keyframe名称
第二个表示动画持续时间
第三个表示动画运动曲线
第四个表示动画延迟时间
第五个表示动画应该播放的次数( n 或infinite) ,n为正整数,无限次播放
第六个表示动画动画是否轮流反向播放动画(normal或alternate)normal正常播放,alternate轮流反向播放

本站说明

前端开发、体验、交互、设计、技术、分享 i--do.com,包含javascript、html、css、nodeJS、demo展示等。转载文章请标注文章来源。

联系我

E-Mail: 709694072@qq.com