css3自定义上下循环动画-css3高斯模糊

2019独角兽企业重金招聘Python工程师标准>>>

css3自定义上下动画

前提是将盒子模型进行定位

@-ms-keyframes next-page {
    0% {bottom: 30px; opacity: 1}
    100% {bottom: 15px; opacity: .5}
}
@-webkit-keyframes next-page {
    0% {bottom: 30px; opacity: 1}
    100% {bottom: 15px; opacity: .5}
}
@keyframes next-page {
    0% {bottom: 30px; opacity: 1}
    100% {bottom: 15px; opacity: .5}
}

.next-page{

-webkit-animation: next-page .8s alternate ease-in-outinfinite;

-ms-animation: next-page .8s alternate ease-in-out infinite;

animation: next-page .8s alternate ease-in-outinfinite;

}

 

 

高斯模糊
/*@-ms-keyframes blurTransform {
    0% {filter: blur(3px); transform: scale(1.1);}
    100% {filter: blur(0); transform: scale(1.111);}
}
@-webkit-keyframes blurTransform {
    0% {filter: blur(3px); transform: scale(1.1);}
    100% {filter: blur(0); transform: scale(1.111);}
}
@keyframes blurTransform {
    0% {filter: blur(3px); transform: scale(1.1);}
    100% {filter: blur(0); transform: scale(1.111);}
}*/

转载于:https://my.oschina.net/parchments/blog/816245