Здравствуйте, помогите с анимацией на css. Цель: есть блок иконок, текст и описание. Изначально текст скрыт, а иконка находится по центру блока, когда наводится мышка или пользователь прокручивает до этого места, то запускается анимация с помощью которой!!: 1) Иконка поднимается на вверх на 60 пикселей, а текст появляется под иконкой плавно, при выхода мышки из зоны блока - плавно утекает вниз, нужно сделать, чтобы анимировались не все, а по одной, т.е по очередно.
Я сделал анимацию, иконка поднимается, но когда доходит до конца, то не остается на вверху, а повторяет анимацию снова.
Должно получится что-то в этом роде
<div class="col-md-3">
<div class="list_items">
<div class="list_items-icons"><span class="icon-position iconset_3"></span></div>
<div class="list_items-scriptHiden">
<div class="list_items-title">title</div>
<div class="list_items-description">description</div>
</div>
</div>
</div>
.list_items
text-align: center
color: #fff
height: 200px
position: relative
.list_items-icons
border-radius: 50%
background-color: #FFF
width: 80px
height: 80px
cursor: pointer
margin: auto
overflow: auto
top: 0
left: 0
bottom: 0
right: 0
position: absolute
&:hover
animation: up_hover 2s ease infinite
.icon-position
width: 50px
height: 40px
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
background: url(../img/sprite_iconset.png) no-repeat
.iconset_1
background-position: 0 0
.iconset_2
background-position: -50px 0
.iconset_3
background-position: -100px 0
.iconset_4
background-position: -150px 0
.list_items-scriptHiden
display: none
Простой
