CSS3动画

CSS3之2D/3D动画

2D的变换

3D的变换

动画

2D动画的变换

基本说明

方法名称	作用
translate()	移动元素
rotate()	旋转元素
scale()	缩放元素
skew()	倾斜元素
matrix()	利用公式改变元素

注意：一般要写不同浏览器的适配

transform: ;
-ms-transform: ; /* IE 9 */
-webkit-transform: ; /* Safari and Chrome */

transform-origin:20% 40%; 变换的源点设定

移动位置

    
        
        
        
    
    
        

            初始位置
        
        

            移动的位置
        
    

效果

缩放

注意

scaleX() 缩放X轴
scaleY() 缩放Y轴
scale() 里面一个参数是X/Y缩放相同，两个参数，第一个是X轴的，第二个是Y轴的

    
        
        
        
    

    
        

            原來大小
        
        

            现在大小
        
    

缩放效果

旋转

注意:

transform: rotate(45deg); 绕顺时针旋转
transform: rotateX(45deg); 绕X轴旋转
transform: rotateY(45deg); 绕Y轴旋转
transform: rotateZ(45deg); 绕Z轴旋转

    
        
        
        
    
    
        

            初始状态
        
        

            旋转之后的状态
        
    

旋转

倾斜

注意:

transform: skew(45deg); 倾斜的角度，逆时针
transform: skewX(45deg); X轴倾斜
transform: skewY(45deg); Y轴倾斜

    
        
        
        
    
    
        

            初始状态
        
        

            变换状态
        
    

倾斜

公式变化matrix()

matrix()里面需要填6个参数，是一个矩阵的算法

    
        
        
        
    
    
        

            初始状态
        
        

            变换状态
        
    

公式变化

可以实现的效果

照片墙

3D动画的变换

基本属性、方法说明

属性	参数	描述
transform	方法	元素的转换方式
transform-origin	X,Y	从那个位置开始转换
transform-style	- flat preserve-3d	表示所有子元素在2D平面呈现。 表示所有子元素在3D空间中呈现。
perspective	number none	元素距离视图的距离，像素单位 默认值
perspective-origin	x-axis y-axis	默认值50% left center right length % 默认值50% top center bottom length % 设置一个3D元素的基数位置
backface-visibility	visible hidden	背面是可见的 背面是不可见的

3D转换方法，与2D使用类似

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

动画

普通动画效果

设置transition属性

transition: all 2s linear;

第一个参数：要改变的值，要是全部都可以变就用all
第二个参数：是此变化需要多少时间完成
第三个参数：以什么样的节奏变化，线性还是慢进快出等样式

效果

帧动画效果

关键的代码成为

第一个参数：关键帧的名字
第二个参数：持续时间
第三个参数：重复的次数或是样式

animation:myfirst 5s 2;

from：初始状态
from：结束状态

from和to也可以写成10%{}样式，精确到某个阶段

@keyframes myfirst{
    from{

    }
    to{
        margin-left: 200px;
        margin-top: 200px;
    }
}

效果

属性表

属性	值	描述
@keyframes	名称 持续时间百分比 CSS样式	必须 0-100% from to CSS属性
animation	name duration timing-function delay iteration-count direction fill-mode play-state	关键帧名称 时间 一个周期样式 延迟 次数 是否反向播放 不播放时的样式 是否运行
animation-name	关键帧名称	关键帧名称
animation-duration	延迟时间	默认值为 0，意味着没有动画效果
animation-timing-function	linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)	匀速 低速开始，然后加快，在结束前变慢 动画以低速开始 动画以低速结束 动画以低速开始和结束 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
animation-delay	time	延迟时间
animation-iteration-count	n infinite	规定次数 无限次
animation-direction	normal reverse alternate alternate-reverse initial inherit	默认值。动画按正常播放。 动画反向播放。 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 设置该属性为它的默认值 从父元素继承该属性
animation-play-state	paused running	指定暂停动画 指定正在运行的动画