其他分享
首页 > 其他分享> > 动画和过渡

动画和过渡

作者:互联网

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

<!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