Question

我想为DIV元素设置动画并更改它的背景和文字颜色。然后将其更改回原始颜色。所以下面的CSS设置背景绿色和文本颜色白色。如何设置切换颜色的动画，例如白色背景和黑色文字？因此，前2秒它会变为绿色/白色，接下来会变为白色/黑色2秒。

.myClass {
    background-color:           #4caf50;
    -webkit-animation-name:     anim1;  /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s;     /* Safari 4.0 - 8.0 */
    animation-name:             anim1;
    animation-duration:         2s;
    color:                      white;
    font-weight:                bold;
}

@-webkit-keyframes anim1 {
    from {background-color: white;}
    to {background-color: #4caf50;}
}

@keyframes anim1 {
    from {background-color: white;}
    to {background-color: #4caf50;}
}

Answer 1

您可以使用@keyframes的定义百分比来控制动画。将动画持续时间更改为4s并在background-color更改50%并再次将其更改回来。

试试这个：

.myClass {
background-color:           #4caf50;
-webkit-animation-name:     anim1;  /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;     /* Safari 4.0 - 8.0 */
animation-name:             anim1;
animation-duration:         4s;
color:                      white;
font-weight:                bold;
}

@-webkit-keyframes anim1 {
0% {background-color: white;}
50% {background-color: #4caf50;}
100% {background-color: white;}
}

@keyframes anim1 {
0% {background-color: white;}
50% {background-color: #4caf50;}
100% {background-color: white;}
}

如何制作css反向动画？

1 个答案: