css动画（一）

一、音乐图标旋转动画代码

/*音乐图标旋转动画开始*/

        #yy {
            /* background:color url x y repeat 图片来自百度图片，按需要更换 */
            /*background: red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat;*/
            /* background-size:auto auto || cover 代表以宽或高填满元素背景 */
            background-size: cover;
            /* 随便设置宽高值，测试 */
            /* 设置默认样式，开启3d硬件加速 */
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            /* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放; */
            -webkit-animation: play2 3s linear infinite;
            -moz-animation: play2 3s linear infinite;
            animation: play2 3s linear infinite;
        }

        @-webkit-keyframes play2 {
            0% {
                /*顺时针旋转*/
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @-moz-keyframes play2 {
            0% {
                -moz-transform: rotate(0deg);
            }

            100% {
                -moz-transform: rotate(360deg);
            }
        }

        @keyframes play2 {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        /*音乐图标旋转动画结束*/

二、云彩飘飘动画代码

@keyframes move1 {
            0% {
            left: -20%;
                }
            100% {
            left: 100%;
                }
        }
        @keyframes move2 {
            0% {
            left: -20%;
                }
            100% {
            left: 100%;
                }
        }
        @keyframes move3 {
            0% {
            left: -20%;
                }
            100% {
            left: 100%;
                }
        }
        
        #cloudy1{position: absolute;left: -20%;top: 3%;height: 15%;}
        #cloudy2{position: absolute;left: -20%;top:20%;height: 15%;}
        #cloudy3{position: absolute;left: -20%;top:2%;height: 10%;opacity: 1;}
        
        #cloudy2{animation: move2 45s 4s infinite linear;}
        #cloudy1{animation: move1 35s infinite linear;}
        #cloudy3{animation: move3 50s 9s infinite linear;}

            <img id="cloudy1" src="./首页_files/cloudy1.png">
            <img id="cloudy2" src="./首页_files/cloudy2.png">
            <img id="cloudy3" src="./首页_files/cloudy3.png">

三、上下滑出、滑入动画代码

.dialog__container {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  background: white;
  transform: translateY(150%);
  transition: all 0.4s ease;
  z-index: 11;
}
.dialog--show .dialog__container {
  transform: translateY(0);
}
<view class="dialog {{ showDialog ? 'dialog--show' : '' }}">

四、左右滑入、滑出动画代码

        js部分       

        /**
        左右滑入 
        */
        function mylayer() {
            $(".mylayer").hide();
            $(".my_content_rejister").hide();
            //$('.my_content').css('left', '-70%');
            $('.my_content').removeClass("slideInLeft");
            $('.my_content').addClass("slideOutLeft");
            //$(".my_content").hide();
        }
        function myshow() {
            //$('.my_content').animate({ 'left': "0px" }, 500, 'linear', function () { });
            $('.my_content').removeClass("slideOutLeft");
            $('.my_content').addClass("slideInLeft");
            $(".mylayer").show();
            $(".my_content").show();
        }

css部分

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }

    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}