动画与过渡的实现与区别

小悠本悠

已于 2022-07-06 21:09:27 修改

阅读量209

点赞数 2

分类专栏： CSS篇文章标签：动画前端 css

于 2022-07-06 21:07:53 首次发布

本文链接：https://blog.csdn.net/qq_42745471/article/details/125647513

版权

CSS篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

过渡：元素从一种形式转化成另一种形式添加的效果

不同点：过渡一定是需要触发事件的。比如鼠标的移入，移出（这里要写终止样式）

过渡的四点：（写在初始样式中）

transition-property :width,background,height ; 要控制的属性名 transition-property，默认值all
transition-duration: 2s,3s,5s; 完成过渡需要的时间，s,ms 1000ms=1s 必须要有
transition-timing-function: linear,linear,ease; 过渡的速度曲线，不是必需，ease默认值

transition-delay: 500ms,300ms,500ms; 过渡延迟时间，s，ms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡的四大要素</title>
    <style>
        .box{
            /* 开始的样式 */
            width: 100px;
            height: 100px;
            background: green;
            margin: 100px auto;

            /*多个属性逗号隔开*/
            /*要控制的css属性名*/
            transition-property:width,background,height ;
            /*完成过渡需要的时间*/
            transition-duration: 2s,3s,5s;
            /*过渡的速度曲线*/
            /*可以使ease慢-快-慢   linear匀速  ease-in慢-快 ease-out快-慢  ease-in-out慢-快-慢 cubic-bezier(n,n,n,n)是0-1*/
            transition-timing-function: linear,ease-out,ease;
            /*过渡延迟时间，s，ms*/
            transition-delay: 500ms,300ms,500ms;
               /*简写：css属性名 完成过渡的时间 速度曲线 延迟开始时间*/
            /*transition: width 2s 1s,height 3s,background 4s linear 1s; */
        }
        .box:hover{
            /* 结束的样式 */
            background: rgb(240, 16, 191);
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

动画：通过改变元素的样式给元素添加动画

animation：要绑定的动画名称动画完成的时间速度曲线延迟开始时间播放次数轮流反向播放保持最后状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画初始</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px auto; 
            /* animation：要绑定的动画名称 动画完成的时间 速度曲线 延迟开始时间 播放次数 轮流反向播放 保持最后状态 */
            animation: name 5s ;
        }
        /*@keyframes用于创建一个动画，动画名称自己设置*/
        @keyframes name {
            /*!*动画开始*!*/
            from{width: 100px;height: 100px;background: red;}
            /* 还可以添加关键帧     也可以没有*/
            50%{width: 200px;height: 300px;background: green;}
            /*!*动画结束*!*/
            to{width: 500px;height: 500px;background: blue;}  
        }
        /* animation-play-state规定动画播放（running）还是暂停（paused） */
        .box:hover{
            animation-play-state: paused;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

区别：

1.过渡需要事件触发，动画不需要事件触发

2.过渡只有开始-结束，动画可以设置多个关键帧

详细属性值参考：

CSS3 transition 属性 | 菜鸟教程

CSS3 动画 | 菜鸟教程