Question

我想在chrome中执行以下CSS3动画:(淡入淡出，并更改文本颜色）。我有一个div元素与class＆＃34; divvy＆＃34;并包含文本＆＃34; Hello World＆＃34;。我不知道为什么我的CSS是：

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.3s;
    -moz-animation-duration:0.3s;
    animation-duration:0.3s;


    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;

}


@-webkit-keyframes example {
    from {color: black;}
    to {color: yellow;}
}


@keyframes example {
    from {color: black;}
    to {color: yellow;}
}

.divvy {
    color: black;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;

      -webkit-animation-name: example; 
          -webkit-animation-duration: 4s;
      animation-name: example;
      animation-duration: 6s;
}

HTML是：

<div class="divvy fade-in">Hello World</div>

包含webkit-animation-name也会使文本因某种原因而消失。

Answer 1

您的代码对我来说很好。您可以运行以下代码以查看它是否正常工作：

＆＃13;

fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.3s;
    -moz-animation-duration:0.3s;
    animation-duration:0.3s;


    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;

}


@-webkit-keyframes example {
    from {color: black; opacity:0;}
    to {color: yellow; opacity:1;}
}


@keyframes example {
    from {color: black; opacity:0;}
    to {color: yellow; opacity:1;}
}

.divvy {
    color: black;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;

      -webkit-animation-name: example; 
          -webkit-animation-duration: 4s;
      animation-name: example;
      animation-duration: 6s;
}

＆＃13;

<div class="divvy fade-in">Hello World</div>

＆＃13;

Answer 2

您可以使用CSS3 transition属性和一些JS（我使用jQuery）来完成类似的效果：

$(document).ready(function() {
    setTimeout(function() {
        $(".divvy").first().removeClass("fade-in");
    }, 1000);
});

.divvy {
    opacity: 1;
    transition: opacity 4s;
}
.fade-in {
    opacity: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="divvy fade-in">Hello, World</div>

为什么我的CSS3动画不起作用？

2 个答案: