css淡入动画,使用CSS淡入大动画效果

要使用CSS在图像上实现淡入淡出大动画效果，您可以尝试运行以下代码-

示例

.animated {

background-image: url(/css/images/logo.png);

background-repeat: no-repeat;

background-position: left top;

padding-top:95px;

margin-bottom:60px;

-webkit-animation-duration: 10s;

animation-duration: 10s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

@-webkit-keyframes fadeOutDownBig {

0% {

opacity: 1;

-webkit-transform: translateY(0);

}

100% {

opacity: 0;

-webkit-transform: translateY(2000px);

}

}

@keyframes fadeOutDownBig {

0% {

opacity: 1;

transform: translateY(0);

}

100% {

opacity: 0;

transform: translateY(2000px);

}

}

.fadeOutDownBig {

-webkit-animation-name: fadeOutDownBig;

animation-name: fadeOutDownBig;

}

Reload page

function myFunction() {

location.reload();

}