css animate动画demo

页面下滑指引的小箭头

<div class="next_guide_icon"><img src="/Images/ting/float_top_icon.png"></div>

/*小箭头上下移动*/
@keyframes guide_icon {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(3px);
    }
    50% {
        transform: translateY(6px);
    }
    75% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0);
    }
}
.next_guide_icon {
    -webkit-animation: guide_icon 1s linear infinite;
    animation: guide_icon 1s linear infinite;
}

文字淡入效果

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.first_text {
    opacity: 0; /*事先规定文字的状态是不显示的*/
    animation: fade-in 2s ease 0s 1; /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
    -webkit-animation: fade-in 2s ease 0s 1;
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

文字从右侧飞入效果

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

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

/音乐图标转圈圈/

<div class="musicBg musicBg_on" style="display: block;"><img src="/Images/ting/bgm_open_icon.png"></div>

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

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}
 .musicBg_on {
    -webkit-animation: rotate 10s infinite linear;
    -o-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear;
}

/下雪/

      <div>//放置当前页面的背景图（树木图片）
           <div class="snow" style="height: 667px;">//放置雪花背景图（雪花图片）
                //这里是当前页面的内容
          </div>
     </div>

@keyframes snow {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 500px 1000px, 500px 500px;
    }
}
.snow {
    background: url('https://static.frdic.com/web/ting/year_snow_imgg.png');//有雪花的透明背景图
    -webkit-animation: snow 30s linear infinite;
    animation: snow 30s linear infinite;
    background-size:cover;
}

/星星一闪一闪/

<div class="star_animate star_animate1" style="height: 667px;"></div>
<div class="star_animate star_animate2" style="height: 667px;"></div>

@keyframes fade-star {
    0% {
        opacity: 0.2;
    }

    50% {
       opacity:1;
    }
    100% {
        opacity: 0.2;
    }
}
@keyframes fade-end {
    0% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}
//两张透明的有星星的背景图，两张图的星星位置是不一样的，达到一闪一隐
.star_animate1 {
    background: url('https://static.frdic.com/web/ting/year_summer_yellow_img.png');
    animation: fade-star 3s ease 0s infinite;
    -webkit-animation: fade-star 3s ease 0s infinite;
}

.star_animate2 {
    opacity: 0;
    background: url('https://static.frdic.com/web/ting/year_summer_yellow_double.png');
    animation: fade-end 3s ease 3s infinite;
    -webkit-animation: fade-end 3s ease 3s infinite;
}

.star_animate {
    width:100%;
    background-size: cover;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}

/*秋风落叶从树上慢慢飘下

<span class="sheets sheet_1" style="display: block;"></span>
<span class="sheets sheet_2" style="display: block;"></span>

@keyframes leaf {
    0% {
        opacity:0;
        top: 180px;
        transform: rotateZ(80deg) translate(0px,0px);
    }

    20% {
        opacity: 1;
        transform: rotateZ(80deg) translate(20px,20px);
    }

    40% {
       transform: rotateZ(-20deg) translate(20px,30px);
    }

    60% {
        transform: rotateZ(-30deg) translate(25px,60px);
    }

    80% {
        top: 400px;
        transform: rotateZ(-10deg) translate(30px,80px);
        opacity: 1;
    }

    100% {
        top: 500px;
        transform: rotateZ(50deg) translate(80px,100px);
        opacity: 0;
    }
}

.sheets {
    display: block;
    position: absolute;
    top: 13%;
}
//落叶1
.sheet_1 {
    left: 50%;
    width: 72px;
    height: 60px;
    background: url("https://static.frdic.com/web/ting/year_leaf.png") no-repeat;
    background-size: contain;
    background-size: 50% 50%;
    -webkit-animation: leaf 5s ease-in 1;
    animation: leaf 5s linear 1;
    animation-delay: 1s;
    /*animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;*/
}
//落叶2
.sheet_2 {
    right: 50px;
    width: 72px;
    height: 60px;
    background: url("https://static.frdic.com/web/ting/year_leaf_double.png") no-repeat;
    background-size: contain;
    background-size: 50% 50%;
    -webkit-animation: leaf 5s ease-in 1;
    animation: leaf 5s linear 1;
    animation-delay: 2s;
    /*animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;*/
}