Сегодня мы рассмотрим как можно применить CSS анимацию в действии. В данном примере будем использовать несколько эффектов. Просто наводим мышь на изображением и видим эффект.

 

Теперь давайте посмотрим на код, на основе которого работает демо пример:

 

Основной HTML и CSS

 

Все эффекты применяются к html коду одного и того же вида. Вот как он выглядит:

 





















01



<ul id="[EFFECT]" class="profiles">











02



    <li>











03



        <img class="pic" src="images/[PIC].jpg" />











04



        <ul class="info">











05



            <li><a href="[URL]">[NAME]</a></li>











06



            <li>[MAIL]</li>











07



            <li>[PHONE]</li>











08



        </ul>











09



    </li>











10



    <!-- More cards -->











11



</ul>



 

Обратите внимание на маркер [EFFECT], который используется в атрибуте ID. Таким образом мы можем применит несколько эффектов к одной и той же карточке. Это основной html, который нас может заинтересовать. Теперь давайте посмотрим на CSS. Я оставил только самое нужное:

 





















01



.profiles {











02



    list-style:none;











03



}











04



.profiles > li {











05



    float:left;











06



}











07



.info, .pic {











08



    position:absolute;











09



}











10



.info {











11



    /* по умолчанию прячем подробную информацию о изображении */











12



    opacity:0;











13



}



 

Вот и всё. Для просмотра полного CSS и HTML кода, смотрите исходники.

 

Эффект простого движения

 





















01



#push .info {











02



    transition: all 0.3s;











03



    transition-delay:0.2s;











04



}











05



#push .pic {











06



    transition: all 0.5s;











07



}











08



/* показываем информацию */











09



#push li:hover .info {











10



    opacity:1;











11



}











12



/* уменьшаем видимость, поворачиваем и уменьшаем изображение */











13



#push li:hover .pic {











14



    opacity:0.7;











15



    transform: scale(0.7) rotate(10deg);











16



}



 

Эффект слайда

 





















01



/* по умолчанию, панель информации смещаем влево */











02



#slide .info {











03



    transition: all 0.3s;











04



    transform: translate(-50px, 0);











05



}











06



#slide .pic {











07



    transition: all 0.3s;











08



}











09



/* при наведении мыши, показываем блок информации и помещаем на нужную позицию */











10



#slide li:hover .info {











11



    opacity:1;











12



    transform: translate(0, 0);











13



}











14



/* при наведении мыши, показываем изображение и помещаем на нужную позицию */











15



#slide li:hover .pic {











16



    opacity:0;











17



    transform: translate(50px, 0);











18



}



 

Эффект 3D сальто

 





















01



#flip {











02



    perspective: 800px;











03



}











04



 











05



#flip .info {











06



    transition: all 0.8s;











07



    opacity:1;











08



    transform-style: preserve-3d;











09



}











10



/* анимируем текст*/











11



#flip .info li {











12



    transform: rotateY(180deg);











13



}











14



#flip .pic {











15



    transition: all 0.8s;











16



    backface-visibility: hidden;











17



    z-index:999;











18



    transform-style: preserve-3d;











19



}











20



/* при наводке мыши, поворачиваем */











21



#flip li:hover .info {











22



    transform: rotateY(180deg);











23



}











24



/* при наводке мыши, поворачиваем */











25



#flip li:hover .pic {











26



    transform: rotateY(180deg);











27



}



 

Эффект взрыва

 





















01



#explode .info {











02



    transition: all 0.7s;











03



    transform: scale(0.8);











04



}











05



#explode .pic {











06



    transition: all 0.7s;











07



}











08



/* при наводке мыши, показываем информацию */











09



#explode li:hover .info {











10



    opacity:1;











11



    transform: scale(1);











12



}











13



/* и обратно */











14



#explode li:hover .pic {











15



    opacity:0;











16



    transform: scale(1.4);











17



}



 

Итог

 

Вот и всё. Четыре созданных эффекта полностью в вашем распоряжении. Прелесть в том, что всё это только средствами CSS.