Question

所以我在＆lt;中有一些文字。 div>标签，我希望它动画。现在我希望文本从低不透明度开始，然后随着时间的推移不透明度增加。我找到了一种简单的方法来降低它，但是我发现它几乎不可能从那个状态开始并向后做，因为如果我改变了我的＆lt;的不透明度属性。 p> ＆lt; div>将始终对待＆lt; p>那种不透明。

我的代码（chrome）：

@-webkit-keyframes opac /* Safari and Chrome */
{
0%   {opacity:0.4}
25%  {opacity:0.4}
50%  {opacity:0.7}
75%  {opacity:0.8}
100% {opacity:1}
}

.doge1:hover {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

HTML：

<div class="doge1">
    <p>
    Transitions in CSS are applied to an element and specify that when a property changes it should do so gradually over a period of time. Animations are different. When applied, they just run and do their thing. They offer more fine-grained control as you can control different stops of the animations.
    </p>
</div>

Answer 1

此？ Live demo here (click).

.doge1 > p {
  opacity: 0.4;
}

@-webkit-keyframes opac /* Safari and Chrome */
{
0%   {opacity:0.4}
25%  {opacity:0.4}
50%  {opacity:0.7}
75%  {opacity:0.8}
100% {opacity:1}
}

.doge1:hover > p {
animation-name: opac;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Answer 2

不确定这是否是您想要的效果，但您可以通过以下方式轻松实现：

.doge1 {
    opacity: .4;
    transition: all 2s;
}
.doge1:hover {
    opacity: 1;
}

http://jsfiddle.net/JFA7g/

div动画中的文字

2 个答案: