CSS动画

CSS动画

    • 动画过渡
        • 解决显示隐藏过渡动画不生效问题
    • 关键帧动画
        • 逐帧动画
    • 2D动画
        • 设置中心点
        • transform多属性设置
    • 3D动画

动画过渡

属性名称 作用 值及中文释义
transition-property 观察目标 all:观察所有
height:观察目标高度
height,width:观察目标高度和宽度,多个属性使用逗号隔开
transition-duration 过渡时间 例:2s
transition-timing-function 过渡效果 linear:匀速
ease:加速
ease-in:先减速后加速
ease-out:先加速后减速
ease-in-out:先减速再加速再减速
贝加尔曲线:https://cubic-bezier.com/#.17,.67,.83,.67
transition-delay 过渡延迟时间 例:2s
transition 过渡复合属性 观察目标 过渡时间 [过渡效果] [延迟时间]
例:all 4s linear 2s
过渡效果和延迟时间可以省略,复合属性观察目标只能有一个,如果想要观察多个目标请使用all
解决显示隐藏过渡动画不生效问题

过渡不能观察display: none;display: block;,通过下面的方式可以实现显示隐藏过渡动画

  • 设置目标高度为0
  • 设置目标边框为0
  • 设置目标内容溢出隐藏
div {
    width: 200px;
    height: 200px;
    font-size: 40px;
    line-height: 200px;
    text-align: center;
    margin: 50px auto;
    background-color: pink;
    transition: all 4s;
}

div {
    height: 0;
    border: 0;
    overflow: hidden;
}

h1:hover + div {
    height: 200px;
}

关键帧动画

属性名称 作用 值及中文释义
animation-name 动画名称
animation-duration 过渡时间
animation-timing-function 过渡方式 linear:匀速
ease:加速
ease-in:先减速后加速
ease-out:先加速后减速
ease-in-out:先减速再加速再减速
贝加尔曲线:https://cubic-bezier.com/#.17,.67,.83,.67
animation-iteration-count 运动次数 infinite:无限次
number:具体次数
animation-delay 延迟时间
animation-play-state 运动状态 running:运动状态
paused:停止状态
animation-direction 运动方向 normal:正方向
reverse反方向
alternate:正方向交替
alternate-reverse反方向交替
animation-fill-mode 动画运动完的保持状态 none:默认值
forwards:最后一帧状态
backwards:第一帧状态
animation 动画复合属性 动画名称 过渡时间 [过渡类型] [延迟时间] [循环次数] [保持状态] [运动方向]
@keyframes 定义动画 动画里可以使用fromto关键字代表关键时间的状态,也可以使用百分比

动画定义:
from...to...模式

@keyframes dh1 {
    from {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    to {
        width: 600px;
        height: 500px;
        background-color: blue;
    }
}

百分比模式:

@keyframes dh2 {
    0% {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    25% {
        width: 300px;
        height: 200px;
        background-color: yellow;
    }

    50% {
        width: 300px;
        height: 300px;
        background-color: green;
    }

    75% {
        width: 400px;
        height: 400px;
        background-color: gray;
    }

    100% {
        width: 600px;
        height: 500px;
        background-color: blue;
    }
}
逐帧动画

steps函数:

  • 第一个参数:动画从第一步到第二步是1步到位,当这个数值越大,越接近匀速效果
  • 第二个参数:
    • start:意思为保留下一帧,看不到第一帧,即第一帧的过渡是很快,肉眼捕捉不到,但第一帧是存在的(第一个参数很小的情况下),相当于step-start
    • end:意思为保留第一帧,看不到下一帧,即看不到最后一帧过渡很快,肉眼捕捉不到,但最后一帧是存在的(第一个参数很小的情况下),相当于step-end

通常我们会将逐帧动画应用在轮播图上,在定义动画时让轮播图最后一步多走一步空白,使用steps(1, end)它就能跳到第一帧,实现最后一帧与第一帧无缝连接。

2D动画

transform:设置2D动画属性

函数名称 作用 值及中文释义
translateX 水平移动 x
translateY 垂直移动 y
translate 水平和垂直移动 x,y
skewX 水平倾斜 例:30deg 正值,拽着盒子的右下角向右,使得盒子右下角竖直方向的边与Y轴形成设置的夹角
负值,拽着盒子的左下角向左,使得盒子左下角竖直方向的边与Y轴形成设置的夹角
skewY 垂直倾斜 例:30deg 正值,拽着盒子的右下角向下,使得盒子右下角水平方向的边与X轴形成设置的夹角
负值,拽着盒子的左下角向下,使得盒子左下角水平方向的边与X轴形成设置的夹角
skew 水平和垂直倾斜 例:30deg,30deg
scale 缩放 0 < val < 1 :缩小
val > 1:放大
val = 1:不变
val = 0:隐藏
-1 < val < 0:倒立缩小
val < -1 :倒立放大
rotate 旋转 例:720deg

translate和定位和margin的区别:translate不会脱离文档标准流,并且不会对周围的元素产生影响

设置中心点

缩放和旋转默认是按照盒子中心点进行的,但也可以自定义设置缩放和旋转的中心点

transform-origin: center bottom;
transform多属性设置

transform可以同时支持平移、缩放、旋转,但是有一定的执行顺序

  • translateX(600px) scale(0.5); 先平移后缩放
  • scale(0.5) translateX(600px); 先缩放后平移,会造成平移的距离也被缩放
  • translateX(600px) rotate(90deg); 先平移后旋转
  • rotate(90deg) translateX(600px);先旋转后平移,会造成将该目标的x轴和Y轴一起旋转,导致平移方向发生变化

3D动画

3D效果前提条件:父盒子设置以下条件:

  1. transform-style: preserve-3d; 表示这个父盒子里的子元素拥有了3D效果
  2. perspective: 1000px; 设置景深(即人与屏幕之间的距离,如果不设置景深,则人不会有近大远小的感觉)

transform:设置3D动画属性

函数名称 作用 值及中文释义
translate3d 平移 x, y, z
rotate3d 旋转 x, y, z
scale3d 缩放 x, y, z

注意:

  • 当盒子的Y轴正轴等于景深,则人的肉眼看不到这个物体。因为这个物体已经与人处于同一平面了
  • 当盒子的Y轴正轴大于景深,则人的肉眼看不到这个物体。因为这个物体已经到人的背后了

你可能感兴趣的:(CSS,css,前端)