Question

我有以下代码，其中包含五个图像的动画，我希望当一张图片变成另一张图片时会有淡入淡出。因为它现在只是一个突然的一个图像接着另一个，有没有办法逐渐淡出？

#MTG
{
    width:225px;
    height:300px;
    border:solid black 2px;
    position:fixed;
    animation-name:MTG;
    animation-duration:15s;
    animation-delay:10s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    transition-duration:5s;
}
@keyframes MTG
{
    0%
    {
        background-image: url(http://lorempixel.com/225/300/nature/1/)
    }
    25%
    {
        background-image:url(http://lorempixel.com/225/300/nature/2/)
    }
    50%
    {
        background-image:url(http://lorempixel.com/225/300/nature/3/)
    }
    75%
    {
        background-image:url(http://lorempixel.com/225/300/nature/4/)
    }
    100%
    {
        background-image:url(http://lorempixel.com/225/300/nature/5/)
    }
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MTG Animation</title>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <h1>MTG Card animation.</h1>
    <div id="MTG">
    </div>

</body>
</html>

Answer 1

我认为玩百分比会对你有帮助。

＆＃13;

#MTG
{
    width:225px;
    height:300px;
    border:solid black 2px;
    position:fixed;
    animation-name:MTG;
    animation-duration:15s;
    /*animation-delay:10s;*/
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:normal;
   /* transition-duration:5s;*/
}
@keyframes MTG
{
    0%, 15%
    {
        background-image:url(http://lorempixel.com/225/300/nature/1/)
    }
    20%, 35%
    {
        background-image:url(http://lorempixel.com/225/300/nature/2/)
    }
    40%, 55%
    {
        background-image:url(http://lorempixel.com/225/300/nature/3/)
    }
    60%, 75%
    {
        background-image:url(http://lorempixel.com/225/300/nature/4/)
    }
    80%, 95%{
        background-image:url(http://lorempixel.com/225/300/nature/5/)
    }
    100%{
        background-image:url(http://lorempixel.com/225/300/nature/1/)
    }
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MTG Animation</title>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <h1>MTG Card animation.</h1>
    <div id="MTG">
    </div>

</body>
</html>

＆＃13;

在CSS动画中，如何使图像相互淡化？

1 个答案: