网站首页编程语言正文

CSS3过渡与动画

作者：小媛同学.，更新时间： 2022-07-22 编程语言

一、过渡

过渡动画：是从一个状态渐渐的过渡到另外一个状态

transition: 要过渡的属性花费时间运动曲线何时开始;

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-timing-function	属性规定过渡效果的速度曲线。
transition-delay	属性规定过渡效果的延迟(以秒计)。

指定过渡的速度曲线

transition-timing-function属性可接受以下值:

ease -规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认)
linear-规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out-规定缓慢结束的过渡效果
ease-in-out-规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n)-允许您在三次贝塞尔函数中定义自己的值

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            transition: all 2s;
        }
        .div-1:hover{
            width: 600px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="div-1"></div>
</body>
</html>

二、动画

CSS动画属性

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定@keyframes动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

反向或交替运行动画

animation-direction属性指定是向前播放、向后播放还是交替播放动画。

animation-direction属性可接受以下值:

normal -动画正常播放（向前)。默认值
reverse -动画以反方向播放(向后)
alternate -动画先向前播放，然后向后
alternate-reverse -动画先向后播放，然后向前

指定动画的速度曲线

animation-timing-function属性规定动画的速度曲线。

animation-timing-function属性可接受以下值:

ease-指定从慢速开始，然后加快，然后缓慢结束的动画(默认)
linear -规定从开始到结束的速度相同的动画
ease-in-规定慢速开始的动画
ease-out-规定慢速结束的动画
ease-in-out-指定开始和结束较慢的动画
cubic-bezier(n,n,n,n)-运行您在三次贝塞尔函数中定义自己的值

指定动画的填充模式

CSS动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode属性能够覆盖这种行为。

在不播放动画时(在开始之前，结束之后，或两者都结束时)，animation-fill-mode属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值:

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards-元素将保留由最后一个关键桢设置的样式值（依赖animation-direction和animation-iteration-count)
backwards -元素将获取由第一个关键帧设置的样式值(取决于animation-direction)，并在动画延迟期间保留该值
both -动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
            border-radius: 50%;
            /* 应用动画 */
            animation-name: div-animate;/*指定动画的名称*/
            animation-duration: 4s;/*动画持续的时间*/
            animation-fill-mode: forwards;/*动画填充模式，forwards的作用是将动画的样式停留在最后一个*/
            /*animation-delay:动画延迟的时间，当值为负数时表示动画执行了多长时间*/
            /* animation-delay: -2s; */
            animation-direction: alternate;
            animation-iteration-count: infinite;
        }
        /* 定义的动画规则 */
        @keyframes div-animate {
            from{
                /* background-color: antiquewhite */
                margin-left: 0;
            }
            to{
                /* background-color: brown; */
                margin-left: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="div-1"></div>
</body>
</html>

原文链接：https://blog.csdn.net/m0_61843988/article/details/125919053

上一篇：SpringBoot允许跨域访问配置
下一篇：Docker安装Seata分布式锁

网站首页 编程语言 正文