动画专题 #

过渡模块 #

• 告诉系统哪个属性需要执行过渡效果 transition-property

例如:

.classInfo{
    width:200px;
    transition-property:width,backgroud-color;
    transition-duration:5s,2s
}

• 告诉系统过渡效果持续的时长

transition-duration

• 告诉系统是否需要延迟执行过渡动画

transition-delay

• 告诉系统过渡动画的运动效果的

transition-timing-function

• 连写

transition: 过渡属性 过渡时长 运动速度 延迟时间,过渡属性 过渡时长 运动速度 延迟时间

• 不单独指定某个属性发生变化

transition: all 5s

即所有变化的属性都按上面的执行

2D转换模块 #

transform

旋转 #

transform:rotate(45deg)

deg代表单位多少度

平移 #

tansform:translate(X轴平移,Y轴平移)

缩放 #

transform:scale(X轴拉伸,Y轴拉伸)

如果取值为1则代表不变

如果取值大于1就放大

如果取值小于1就缩小

综合 #

transform: rotate(45deg) translate(30px,20px) scale(1.2)

形变中心点 #

默认情况下，所有的元素都是以自己的中心点做参考来旋转的，我们可以通过形变中心点来修改它的参考点

transform-origin: 10px 30px

第一个参数是：水平方向

第二个参数是：垂直方向

三种取值：

• 具体像素

• 百分比

• 特殊关键词： top left center right bottom

旋转的轴向 #

默认情况下所有的元素都是围绕着Z轴旋转的

rotate

围绕X轴旋转

rotateX

围绕Y轴旋转

rotateY

透视属性 #

近大远小

perspective

参数：距离物体的远近，离着物体越近就看的越清楚

动画模块 #

与过度动画的区别：

过度必须认为的触发才会执行动画

动画不需要认为的触发就能执行

相同点:

过度和动画都是用来给元素添加动画的

过度和动画都是系统新增的一些属性

过度和动画都需要满足三要素才会动画效果

执行动画的名称 #

animation-name:动画名称

创建一个自己的动画名称 #

@keyframes 动画名称{
    from{
        margin-left:0
    }

    to{
        margin-left:50px
    }
}

执行时间 #

animation-duration:执行时间

其他属性 #

告诉系统延迟多长时间执行动画

animation-delay:延迟时间

animation-timing-function:动画执行速度

告诉系统动画执行次数

animation-iteration-count:执行次数

infinite 为无限循环执行动画

告诉系统是需要执行返动画

取值：

• normal:默认值，执行完一次之后回到启动继续执行下一次
• alternate:执行完一次之后往回执行下一次 animation-direction:alternate

告诉系统当前动画是否需要被暂停

取值：

• running:执行动画

• paused:停止动画

animation-play-state:

动画的执行状态 #

animation-fill-mode作用

指定动画等待状态和结束状态的样式

取值：

none:不做任何改变

forwards: 让元素结束的状态，保持动画的最后一帧的样式

backwards:让元素等待状态的时候显示动画第一帧的样式

both： 结合上面的两个取值

1. 等待状态

2. 执行状态

3. 结束状态

连写 #

animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画

3D转换模块 #

2D为平面，只有宽度和高度，没有厚度

3D为立体，有宽度和高度，还有厚度

默认为2D效果

给父元素加一个属性为transform-style:preserve-3d则呈现出3D的效果