tailwindcss学习笔记之动画

不止是Css，在绝大部分其它语言中，创建动画一般都有两种，一种是transitions（过渡），另外一种是animations（动画）。

transitions（过渡）

transitons 的特点是被动触发。它会等待某个Css属性（例如颜色、宽度）发生变化时，将这个变化过程以平滑的方式呈现出来。如果没有transitions，属性的变化回事瞬间完成的。

总结，Css过渡适用于那些有明确触发条件，并且只在两个状态之间进行切换的动画效果。

因此，transitions 最适合用于响应用户的交互行为，比如鼠标悬停（:hover）或者元素获得焦点（:focus）时，为其添加平滑的视频效果。

animations（动画）

与 transitions 不同，animations 更加强大和主动。它通过 @keyframes（关键帧）规则 ，允许我们精准地控制动画的每一个步骤和细节，从而创造出非常复杂的动画序列。animations不需要等待用户的交互行为来触发，可以在页面加载后自动播放。当你需要实现一个无需交互、可以独立运行的复杂动画时，它就是最佳选择。当需要使用的是包含多个状态，那也只能使用css animations。

1、Css transition 动画

1.1、transitions 示例

html:

<button class="btn">Hover Me!</button>

css:

.btn {
    margin: 200px 0 0 300px;
    border: solid 8px red;
    border-radius: 5px;
    padding: 10px 15px;
    background-color:bisque;
    color: red;
}
.btn {
    transition-property: transform; 
    transition-duration: 0.3s; 
    transition-timing-function: ease; 
    transition-delay: 0s; 
}
.btn:hover {
    transform: translateY(-10px);
}

1.2、transition属性解释

transition-property：用于指定应该对哪些CSS的属性应用动画效果

transition-duration：用于指定动画效果持续的时间，单位可以是 s 和 ms

transition-timing-function：用于设置在单位时间内，动画播放速度是如何变化的，默认是ease

transition-delay：用于设置在过渡发生前会延迟多久，单位可以是 s 和 ms，默认 0s

1.3、属性简写

可以使用transiton属性来简写上面的4个属性，如：

.btn {
    transition: transform 0.3s ease 0s;
}

1.4、多属性过渡动画

.btn:hover {
    transform: translateY(-10px);
    background-color: black;
    color: white;
}

1.4.1、指定过渡属性

.btn {
    /*方法1：每一个都单独指定*/
    transition-property: transform;
    transition-property: background-color;
    transition-property: color;

    /*方法2：在一个属性中指定*/
    transition-property: transform, background-color, color;

    /*方法3：在一个属性中指定，无逗号分割也可以*/
    transition-property: transform, background-color, color;
}

1.5、多属性简写

.btn {
    transition: transform 0.3s, backgournd-color 0.3s, color 0.3s;
}

1.5.1、多属性简写2

.btn {
    /* 使用all替代这些属性名，让过渡对所有属性生效 */
    transition: all 0.3s;
}

2、Css animation 动画

2.1、定义动画

在把动画应用到元素上之前，需要先用@keyframes来定义它

@keyframes identifier {
    /* 在动画内部定义一个序列，其中每一步都是一个特定的百分比值，0%是动画的开始，100%是动画的结束 */
    /* 0%是动画的开始 */
    0% {

    }
    /* 任何介于0%和100%之间的值都代表动画过程中的某个时间点 */
    
    /* 100%是动画的结束 */
    100% {

    }
}

2.2、使用示例

2.2.1、定义动画

@keyframes spin {
    0% {

    }
    50% {
        scale: 2;
    }
    100% {
        transform: rotate(360deg);
        border-radius: 50%;
    }
}

2.2.2、将动画应用到元素上

.element {
    animation-name: spin;
}

2.3、其它属性

animation-duration： 定义动画持续时间

animation-timing-function：定义在单位时间内，动画播放速度是如何变化的

animation-delay：定义动画在开始播放之前会延迟多久

animation-iteration-count：定义动画播放次数，默认值是1，infinite为永久

animation-direction：定义动画播放顺序，默认值normal从头到尾播放，reverse倒着播放，alternate每播放一次都更改播放的方向，alternate-reverse同理

animation-fill-mode：默认值none，forwards动画播放完成后停留在最后一帧，backwards让元素在delay期间保持在动画的起始状态，both结合了forwards和backwards

animation-play-state：控制动画是播放还是暂停，通过它可以允许用户与动画进行交互，默认值running，还有paused等选项

示例

.element {
    animation-name: spin;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
}
.element:hover {
    animation-play-state: paused;
}

2.4、animation简写

.element {
    /* animation-name: spin;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running; */

    animation: spin 3s ease 1 normal both running;
    /* 最佳实践，把animation-delay单独列出来，增加可读性 */
    animation-delay: 1s;
}
.element:hover {
    animation-play-state: paused;
}