Текст внутри div анимации

Question

Итак, у меня есть текст внутри тега < div>, и я хочу, чтобы он был анимирован. Теперь я хочу, чтобы текст начинался с низкой непрозрачности, а затем увеличивал непрозрачность с течением времени. Я нашел для него легкий способ уменьшить, но я нахожу почти невозможным заставить его начать с этого состояния и делать это в обратном направлении, поскольку, если я изменю атрибут непрозрачности на моем < p>, то div> всегда будет рассматривать < p > при этой непрозрачности.

Мой код (хром):

@-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/