CSS3 动画

原创
2018/08/24 13:23
阅读数 40

1.transform

transform是css3的属性,主要用于元素的变形,有如下四种属性值:

translate:指定对象的2D平移,第一个参数为X轴平移量,第二个参数为Y轴平移量。

列如:translate(10px,10px)  //向x轴和y轴方向正向平移10像素

rotate:指定对象的2D旋转,可以配合transform-origin属性(旋转原点),默认为中心点

列如:rotate(90deg), transform-origin:0 0;

scale:指定对象的2D缩放,两个参数分别对应x轴和y轴的多方比例,也可使用transform-origin改变缩放原点

例如:scale(0.8, 0.8)

skew:指定对象的斜切扭曲两个参数分别对应x轴y轴的斜切角度

列如:skew(50deg, 30deg) 

 

2.transition

transition为css3属性,主要用于元素的过度动画处理,有如下四种属性

property:检索或设置对象中的参与过度的属性,可以通过transition-property属性制定

duration:过度动画的时间,可以同transition-duration属性指定

timing-function:检索或设置对象中过度的动画类型,可以通过transition-timing-function属性指定,过渡动画类型有如下几种:

    linear : 规定以相同速度开始至结束的过渡效果,

    ease : 规定慢速开始,然后变快,然后慢速结束的过渡效果,

    ease-in : 规定以慢速开始的过渡效果,

    ease-out : 规定以慢速结束的过渡效果,

    ease-in-out : 规定以慢速开始和结束的过渡效果

    自定义:cubic-bezier(n,n,n,n)

delay:检索或设置对象延迟过度的时间。可以通过transition-delay属性指定,

上面的所有的样式可以进行合写如下

transition:<transition-property> <transition-duration> <transition-timing-function> <transition-delay>

使用样例:transition:background 2s linear 1s 或者    transition:all 2s linear

使用场景:一般与hover、focus等伪类配合使用

使用方法

<style> 
    input{
	  width:30px;
	  transition:all 0.5s ease;
    }
    input:focus{
	  width:80px;
	  height:50px;
    }
</style>

3.animation

animation是css3动画属性,用于元素的动画控制:

    @keyframes:定义动画

    动画定义可以有两种方式:

//第一种,使用from和to
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

//第二种,使用百分比
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

    animation-name:动画名称,使用@keyframes定义动画,

    animation-duration:动画完成的周期,

    animation-timing-function:动画速度曲线,

    animation-delay:动画开始时间,

    animation-iteration-count:动画播放次数,默认为1,无限次:infinite

    animation-direction:动画是否逆向播放,默认normal(非逆向),逆向执行:alternate

    animation-play-state:动画是否正在运行或暂停,默认是running

    animation-fill-mode:对象动画时间之外的状态

    animation:可以将上面的属性进行合写六个参数分别为<animation-name> <animation-duration><animation-timing-function><animation-delay><animation-iteration-count>< animation-direction>

    例如:animation: myfirst 5s linear 2s infinite alternate;

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部