动画和过渡

2022-08-11 11:32:19 阅读：150 来源： 互联网

标签：动画 2s color transition animation 过渡 div

先举个例子，动画--实现上下无限跳动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .arrow {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        margin-left: -1%;
        animation-name: beat;
        /*动画名称*/
        animation-duration: .5s;
        /*设置秒数*/
        animation-timing-function: linear;
        /*速度曲线*/
        animation-iteration-count: infinite;
        /*播放次数*/
        animation-direction: alternate;
        /*逆向播放*/
        animation-play-state: running;
        /*正在运行*/
    }

    @keyframes beat {
        0% {
            bottom: 15%;
        }

        100% {
            bottom: 14%;
        }
    }

    .arrow img {
        width: 30px;
    }
</style>

<body>
    <div class="arrow">
        <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191107114906-sjt.png" alt="">
    </div>
</body>

</html>

animation属性类似于transition，都是随着时间改变元素的属性值。

区别如下：

transition需要触发一个事件才会随着时间改变其CSS属性

animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

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

2、过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个

transition 过渡效果，举个例子：鼠标滑过时字体颜色变红色

<!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>
</head>
<style>
    div:hover {
        color: red;
    }
    
    div {
        /*执行过渡的属性，例子设置为颜色color的变化，也可以是width, font-size等，不设置的话默认是all，即所有属性*/
        transition-property: color;
        /*过渡的时间，单位是秒，如1s, 2.3s，不设置的话默认 0s，即无过渡效果*/
        transition-duration: 2s;
        /*设置过渡时的变化方式，默认是 ease，即速度由慢到快再到慢，常用的还有 linear，线性变化速度均匀，还有其他几个方式，过渡时间短的话看不出什么区别*/
        transition-timing-function: linear;
        /*延迟时间，即多少秒后执行过渡效果，默认 0s，不延迟*/
        transition-delay: 0;
    }
    /*过渡简写方式*/
    /* div {
        transition: color 2s linear 0;
    } */
    /*或最少指定过渡时间*/
    /* div {
        transition: 2s;
    } */
    /*也可以设置每个样式分别过渡*/
    /* div {
        transition: color 2s linear, font-size 1s, background 1s;
    } */


    /*由于是新特性，为了兼容性需要加上浏览器厂商前缀*/
    
    div {
        transition: 2s;
        -webkit-transition: 2s;
        -moz-transition: 2s;
        -ms-transition: 2s;
        -o-transition: 2s;
    }
</style>

<body>
    <div>鼠标滑过过渡变红</div>
</body>

</html>

例如：鼠标悬停图片放大

#div1 img{
  cursor: pointer;
  transition: all 1.1s;
}
#div1 img:hover{
  transform: scale(1.2);
}

例如：元素的旋转和缩放

transfrom是css3里面的属性，主要是运用于元素的2D或3D转换，它可以将元素旋转、缩放、移动和倾斜。

div{
    transform:rotate(7deg);    //2D旋转，括号参数为角度
}

transfrom属性的默认值为none，意义为不进行转换。

transfrom属性有很多，能够支持我们做一些简单的2d和3d动画，例如：一个不断旋转的立方体

在使用transfrom来制作简单的3D动画之前，得需要了解到transfrom的常用属性：

translateX(x) 定义转换，只是用 X 轴的值，表示在二维平面上水平方向移动元素，括号里的值是移动的像素单位 px。

translateY(y) 定义转换，只是用 Y 轴的值，表示在垂直方向上移动，括号里面的值和**translateX(x)**里面括号的值是一个意思，不过数值越大越往下走

translateZ(z) 定义 3D 转换，只是用 Z 轴的值

rotateX(angle) 定义沿着 X 轴的 3D 旋转，angle代表的是旋转的角度

rotateY(angle) 定义沿着 Y 轴的 3D 旋转

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转

animation 动画效果，举个例子：

<!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>
</head>
<style>
    /*定义好关键帧后就直接在需要应用动画的元素标签内使用*/
    
    div {
        /*就是之前跟在@keyframea后面的自定义名称，之前设置的是 my-animation*/
        animation-name: my-animation;
        animation-duration: 3s;
        animation-timing-function: ease;
        /*和前面一样，默认分别为 0, ease, 0*/
        animation-delay: 0;
        /*动画播放的次数，默认 1，但一般设置为 infinite，即无限循环*/
        animation-iteration-count: 3;
        /*动画播放的方向，normal为默认，正向播放，reverse为反向播放，alternate为正向后反向，alternate-reverse为反向后正向*/
        animation-direction: normal;
        /*播放状态，默认 running，运行，paused为暂停，可以在JavaScript中使用对动画进行控制*/
        animation-play-state: running;
    }
    /*定义的简写方法---animation-name 和 animation-duration为必须设置的属性*/
    /* div{
        animation: my-animation 3s linear infinite alternate;
    } */
    /*实现CSS动画也需要设置关键帧 @keyframes*/
    
    @keyframes my-animation {
        0% {
            color: red;
        }
        50% {
            color: green;
        }
        100% {
            color: blue;
        }
    }
    /*@keyframes后面跟的是自定义的动画名称，后面会用到。里面的0%，50%，100%便是设置的三个关键帧及其对应样式，如果只需要设置首尾两个关键帧，可以这样写*/
    
    @keyframes my-animation {
        from {
            color: green;
        }
        to {
            color: blue;
        }
    }
    /*最后浏览器兼容*/
    
    div {
        transition: 2s;
        -webkit-transition: 2s;
        -moz-transition: 2s;
        -ms-transition: 2s;
        -o-transition: 2s;
    }
</style>

<body>
    <div>css动画</div>
</body>

</html>

demo案例：

类似小狗这种效果

<!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>
</head>
<style>
    /*定义好关键帧后就直接在需要应用动画的元素标签内使用*/
    
    .walkthrough {
        animation-name: walk;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-delay: 0.5s;
        animation-iteration-count: infinite;
    }
    /*实现CSS动画也需要设置关键帧 @keyframes*/
    
    @keyframes walk {
        0% {
            position: absolute;
            left: 0;
        }
        48% {
            position: absolute;
            transform: rotateY(0deg);
        }
        50% {
            position: absolute;
            left: 28rem;
            transform: rotateY(180deg);
        }
        100% {
            position: absolute;
            left: 0;
            transform: rotateY(180deg);
        }
    }
    /*最后浏览器兼容*/
    
    .walkthrough {
        transition: 2s;
        -webkit-transition: 2s;
        -moz-transition: 2s;
        -ms-transition: 2s;
        -o-transition: 2s;
    }
    /*1.最初写的时候, 在 50%处设置了 rotateY(180deg) ，所以会在 0 -> 50%的时候缓动翻转。为了避免, 选择了使其在快到50%前都还是未翻转的状态。(48%处添加的css)*/
    /*2.在50%处翻折过后, 返回的过程中又进行了一次翻折。折腾后发现, 最终状态 100% 也是需要写上图片状态*/
</style>

<body>
    <div style="border: 1px solid red;width:50px;height:20px;text-align: center;" class="walkthrough">
        动画
    </div>
</body>

</html>

标签：动画,2s,color,transition,animation,过渡,div
来源： https://www.cnblogs.com/qianduan-lucky/p/16575088.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动画和过渡