CSS3动效(Transitions、Transforms、Animation)

理解：

transition 过渡连续的、从a到b
transform 变换旋转、缩放、偏移
animation 动画

一、transition

1.理解

　　过渡，用于平滑的改变CSS值，举个例子：

change{
　　width:100px;
　　height:100px;
　　background:yellow;
　　transition:background 10s;
}
change:hover{
　　background:red;
}

　　意思就是说先在change这个css样式里面“声明”：如果我的background属性发生了变化，那么它的变化过程是连续变化（渐变），这个变化过程持续10s。

　　所以，transition 就是用来定义，当一个变化发生时，它变化的连续性和时间，以及连续过程的快慢情况的（先慢后快、先快后慢等）。

　　transition不控制变化的产生，而是只控制变化发生后的过渡效果。

2.使用

　　transition属性是下面几个属性的缩写:

transition-property指定哪个属性应用过渡，比如transition-property:background就是指定background属性应用过渡。
transition-duration指定这个过渡的持续时间
transition-delay过渡延迟多长时间开始
transition-timing-function指定过渡动画缓动类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。

　　使用transition可以将这些属性合并来写，顺序为属性持续时间过渡类型延迟时间

二、transform

1.理解

　　transition不控制变化的产生，与之相对，transform就是用来产生变化的，比如选择，缩放等等。但是transform的变化是没有过渡效果的，就是直接显示变化过的样子了，我们将transition和transform一起用，就能产生渐变的动画效果了。比如旋转，移动等等。

2.使用

　　2D转换

translate(x,y)　　相对于当前位置移动　　值100px 表示100像素　　translateX() translateY()
rotate(角度)　　顺时针旋转（负值表示逆时针旋转）　　值30deg 表示30度
scale(a,b)　　尺寸缩放　　值2 表示缩放2倍　　scaleX() scaleY()
skew( 角度,角度)　　翻转，x方向，y方向　　值30deg　　表示30度　　skewX() skewY()

　　可以使用matrix(n,n,n,n,n,n)将这些变化整合在一起（实际上上面四个变换的本质都是通过 matrix 矩阵来实现的，如果要实现没有提供的效果，可以通过这个函数直接控制）

　　【注】：transform变换的参照点默认为中心点，可以通过transform-origin(a,b)改变参照点的位置,a,b的值可以是百分比，px，em等，或者left center right top bottom center

　　3D转换

translate3d(x,y,z)　　3D移动　　translateX(x) translateY(y) translateZ(z)
scale3d(x,y,z)　　3D缩放　　scaleX(x) scaleY(y) scaleZ(z)
rotate3d(x,y,z,angle)　　3D旋转　　rotateX(angle) rotateY(angle) rotateZ(angle)
prespective(n)　　透视视图

transition和transform一起使用的例子：

.change{
    transition:all 2s ease;
}
.change:hover{
    transform:rotate(720deg) scale(2,2);
}

三、animations

　　通过一起使用transition和transform已经可以实现一些动画效果，但是对于复杂的动画，使用animations更加合适。

1.简介

　　@keyframes (关键帧)用于创建动画，写法：　　

@keyframes name{
    from{//start css
    }
    to{//end css
    }
}
//or
@keyframes name{
    0%{//start css
    }
    50%{//center css
    }
    100%{//end css
    }
}

【注】：使用关键帧先定好动画变换过程中的关键样式，然后再使用连续变化或者不连续变化实现动画效果

　　animation 通过关键帧产生动画效果，所有动画效果的简写属性，例子：

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}

@keyframes myfirst{
    from {
        background:red;
    }
    to {
        background:yellow;
    }
}

2.属性

animation-name　　@keyframes动画的名称

animation-duration　　动画完成一个周期所需的秒或者毫秒

animation-timing-function　　动画的速度曲线

　　linear　　匀速
　　ease　　默认慢-快-慢
　　ease-in　　以快结束
　　ease-out　　以慢结束
　　ease-in-out　　以慢开始和结束　　和ease的区别：ease-in-out中间部分是近似匀速的
　　cubic-bezier(n,n,n,n)　　贝塞尔曲线　　n取值0或者1
　　step-start　　在帧间变化的过程中，以下一帧的显示效果来填充间隔动画，即不连续动画（逐帧动画）
　　step-end　　以上一帧的显示效果来填充间隔动画
　　steps()　　可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数(start/end)来决定显示效果。第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。

animation-delay　　动画什么时候开始（秒或者毫秒）

animation-iteration-count　　动画被播放的次数　　数字或者infinite(无限)

animation-direction　　是否反向播放动画　　

　　normal　　正常播放正向
　　reverse　　反向播放
　　alternate　　动画在奇数次正向播放，在偶数次反向播放
　　alternate-reverse　　动画在奇数次反向播放，在偶数次正向播放
　　initial　　默认值
　　inherit　　从父元素继承

animation-fill-mode　　动画不播放时，应用到元素的样式

　　none　　默认，无
　　forwards　　动画停留在结束帧
　　backwords　　动画完成后停留在初始帧
　　both　　同时遵循forwards和backwords
　　initial　　默认值
　　inherit　　从父元素继承

animation-play-state　　动画运行和暂停

　　paused　　暂停
　　running　　运行

3.animation简写

　　可以通过animation来将这些元素写在一起：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

　　具体一点：

animation:myAnim 1s linear 1s infinite alternate both running;

秒客网

CSS3动效(Transitions、Transforms、Animation)

相关文章