Материал волновой фоновой анимации

Question

Я нашел это fiddle, но анимация работает только в том случае, если я нажимаю и удерживаю.

#parent { 
 
    height: 200px; 
 
    width: 400px; 
 
    background-color: lightgray; 
 
} 
 
#circle { 
 
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: 0 0; 
 
    height: 200px; 
 
    width: 400px; 
 
    transition: .3s ease-in; 
 
} 
 
#parent:active #circle { 
 
    background-size: 600px 600px; 
 
}

<div id="parent"> 
 
    <div id="circle"></div> 
 
</div>

Можно ли сделать анимацию для загрузки при загрузке страницы? Просто хочу, чтобы какая-то фоновая загрузка в анимации аналогична фокусу Android Lollipop/Firefox для ТВ.

Answer 1

Вы можете использовать CSS3 animation, чтобы начать автоматический переход.

Узнайте больше о animation здесь:

1. https://css-tricks.com/almanac/properties/a/animation/
2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
3. http://www.w3schools.com/css/css3_animations.asp

Изменено скрипку:Fiddle

Отрывок:

#parent { 
 
    height: 200px; 
 
    width: 400px; 
 
    background-color: lightgray; 
 
} 
 
#circle { 
 
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg"); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: 0 0; 
 
    height: 200px; 
 
    width: 400px; 
 
    /*transition: .3s ease-in;*/ 
 
    animation: example 1s ease-in infinite; 
 
} 
 
@keyframes example { 
 
    0% { 
 
    background-size: 0px 0px; 
 
    } 
 
    50% { 
 
    background-size: 600px 600px; 
 
    } 
 
    100% { 
 
    background-size: 0px 0px; 
 
    } 
 
}

<div id="parent"> 
 
    <div id="circle"></div> 
 
</div>