CSS3 эффекты при наведении с использованием переходов, преобразований и анимации ( Transitions, Transformations, Animations)

admin

10 лет назад

Этот пост полностью посвящён примерам с CSS3 эффектами. Мы узнаем больше об эффектах при наведении с использованием переходов, превращений и анимации. Все эффекты приведены с исходным кодом и визуальными примерами.
Эти примеры помогут вам создавать и украшать веб-сайты весело, легко, быстро и эффективно, а также расширит возможности посетителей сайта, потому что вы можете создать интересные эффекты без использования JavaScript или тяжелых флэш-анимаций.

Vendor — префиксы: Все, что вы должны о них знать!

Прежде чем начать, необходимо получить правильное представление о префиксах: [-webkit- | -moz- | -о- | -ms-], которые часто встречаются на этой странице. Вопрос в том, должны ли вы действительно использовать все из них в каждом конкретном случае. Например, Firefox справляется преобразованиями (transforms) с октября 2012 года без -moz- префикса, но если вы хотите иметь поддержку IE9, вам необходимо включить в код префикс -ms-. На этой странице включены префиксы только там, где это имеет смысл для текущего и будущего использования. Если вы обеспокоены обратной совместимостью, обратите внимание на эту таблицу и добавляйте только то, что нужно.

Тип	Включения	Обратная совместимость	Для версии	Дата выпуска
transform (2d)	-webkit-	-moz- -o- -ms-	FF <= 15 Opera <= 12 IE 9	10/2012 10/2012 03/2011
transform (3d)	-webkit-	-moz-	FF <= 15	10/2012
transition	-webkit- (for Android/Blackberry)	-moz- -o-	FF <= 15 Opera <= 12	10/2012 10/2012
animation	-webkit-	-moz-	FF <= 15	10/2012
backface-visibility	-webkit-	-moz-	FF <= 15	10/2012
@keyframes	-webkit-	-o-	Opera <= 12	10/2012
box-shadow	—	-webkit- (Для разных браузеров)	Разный	Разный

Как вы видите, больше нет необходимости везде вставлять vendor — префиксы, большинство современных браузеров автоматически обновляются (или, по крайней мере, полу-автоматически) до последних версий и те дни остались в прошлом. Вообще, просто добавляйте -webkit- к не-префиксной версии, и этого будет достаточно. На этом, пожалуй закончим и давайте погрузимся в мир CSS3.

01: Размер изображения

.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

02: Увеличение

.container:hover .image {
-webkit-transform:scale(1.3);
transform:scale(1.3);}
.container {
overflow:hidden;
width:200px;
height:150px;}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

03: Уменьшение

.container:hover .image {
-webkit-transform:scale(1);
transform:scale(1);}
.container {
overflow:hidden;
width:200px;
height:150px;}
.image {
-webkit-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

04: Радиус границы и эффект тени

.image:hover {
border-radius:50%;
box-shadow: 0 10px 6px -6px grey;}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

05: Граница искажения радиуса

.image:hover {
border-top-left-radius: 120px; 
border-bottom-right-radius: 120px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;}
.image {
border-bottom-left-radius: 120px;
border-top-right-radius: 120px; 
border-bottom-right-radius: 15px;
border-top-left-radius: 15px; 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

06: Граница искажения радиуса II

.image:hover {
border-top-left-radius: 30px 120px; 
border-bottom-right-radius: 30px 120px;
border-bottom-left-radius: 15px; 
border-top-right-radius: 15px;}
.image {
border-top-left-radius: 15px; 
border-top-right-radius: 120px 30px; 
border-bottom-left-radius: 120px 30px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

07: Светящиеся границы

.image:hover {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);}
.image {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

08: Вращение (2D)

.image:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

09: Деформация

.image:hover {
-webkit-transform: skew(0deg,20deg);
transform: skew(0deg,20deg);}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

10: Сдвиг и непрозрачность

.image:hover {
-webkit-transform: translate(20px,-50px);
transform: translate(20px,-50px);
opacity: 0.4;}
.image {
opacity: 1;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

11: Разворот

.container:hover .image{
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;}
.container .image, .container:hover .image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

12: Вертикальный Разворот

HTML

<div class="container">
<div class="carddiv">
<img class="frontofcard" src="img" alt="img">
<p class="backofcard">Text</p>
</div>
</div>

CSS

.carddiv {
width:200px; height:150px; position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 75px;
-webkit-transition: all 0.7s ease;
transform-style: preserve-3d;
transform-origin: 100% 75px;
transition: all 0.7s ease;}
.container:hover .carddiv {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);}
.frontofcard, .backofcard {
width:200px; height:150px; position:absolute; left:0; 
-webkit-backface-visibility:hidden;
backface-visibility:hidden;}
.backofcard {
padding-top:50px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);}

13: Трансформация

.image:hover {
-webkit-box-shadow: 0px 0px 15px 15px #fff;
box-shadow: 0px 0px 15px 15px #fff;
border-radius:50%;
opacity: 0.6;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);}
.image {
opacity: 1;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

14: Изображение с наложением текста и эффектом затухания

HTML

<div class="container">
<img src="" alt="">
<div class="textbox">
<p class="text">TEXT</p></div></div>

CSS

.container {
position:relative;}
.textbox:hover {
opacity:1;}
.text {
padding-top: 50px;}
.textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

15: Изображение с наложением текста и эффектом масштабирования

HTML

<div class="container">
<img src="" alt="">
<div class="textbox">
<p class="text">TEXT</p></div></div>

CSS

.container {
position:relative;}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
-webkit-transform: scale(0);
transform: scale(0);
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);}
.container:hover .textbox {
-webkit-transform: scale(1);
transform: scale(1);}
.text {
padding-top: 50px;}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

16: Изображение с наложением текста и эффектом сдвига текста

HTML

<div class="container">
<img src="" alt="">
<div class="textbox">
<p class="text">TEXT</p></div></div>

CSS

.container {
position:relative;
overflow:hidden;}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);}
.container:hover .textbox {
margin-top:0;}
.text {
padding-top: 50px;}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

17: Сдвиг текста и изображения при наведении

HTML

<div class="container">
<img src="" alt="">
<div class="textbox">
<p class="text">TEXT</p></div></div>

CSS

.container {
position:relative;
overflow:hidden;
width:200px;
height:150px;}
.container .textbox {
position:absolute;
top:0;
left:0;
width:200px;
height:150px;
margin-left:-210px;}
.container:hover .textbox {
margin-left:0;}
.container img {
margin-left:0;}
.container:hover img {
margin-left:210px;}
.text {
padding-top: 50px;}
.container img, .textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

Примеры с 1 по 17:

Коротко о различных видах функции «easing«

Если вы посмотрите на некоторые из исходных кодов, вы, возможно, заметите, что все примеры используют функцию синхронизации [su_tooltip style=»red» position=»north» shadow=»yes» rounded=»yes» title=»Каскадные таблицы стилей» content=»CSS»]CSS3 [/su_tooltip] ease со временем перехода 0,7 секунд. Это сделано для того, чтобы подчеркнуть реальный эффект, а не переходную функцию за ним. Тем не менее, вы можете не только настроить время перехода, но также способ перехода обрабатываемый браузером. Вот некоторые из возможных вариантов с объяснением, что это на самом деле:

ease : анимация начинается быстро, но значительно замедляется в конце.
ease-in-out : анимация начинается и заканчивается медленно.
ease-in : анимация начинается очень медленно и достигает полной скорости в конце.
ease-out : анимация начинается на полной скорости, но постепенно замедляется.
linear : анимация имеет ту же скорость от начала до конца (без замедления).

Скорее всего, это все, что вам когда-нибудь понадобится. Тем не менее, если вы своего рода перфекционист или просто хотите иметь что-то, сделанное именно так, как вам нравится, вы можете использовать свой собственный анимационный переход, используя cubic-bezier() . Чтобы его использовать, просто замените слово ease в приведенных примерах на что-то вроде cubic-bezier(1,-0.75,0.5,1.2). Первые и последние два значения не более чем простые контрольные точки, представленных как (x1, y1, x2, y2) на графике функции. Не важно, что, функция начинается (0,0) и заканчивается в точке (1,1). Но с этими двумя контрольными точками, вы можете влиять на путь между (0,0) и (1,1). Поэкспериментируйте с величинами для регулировки функции синхронизации, в зависимости от ваших целей. Например cubic-bezier(0.42,0,1,1) имеет тот же эффект, как и ease-in, то время как cubic-bezier(0,0,0.58,1) имеет тот же эффект, как ease-out.

Итак продолжим:

18: Плавная смена двух изображений

HTML

<div class="container">
<img class="image2" src="img2" alt="">
<img class="image1" src="img1" alt="">
</div>

CSS

.container {
position:relative;
width:200px;
height:150px;}
.container img {
position:absolute;
top:0;
left:0;
-webkit-transition: opacity 1.1s ease;
transition: opacity 1.1s ease;}
.container:hover .image1 {
opacity:0;}

19: Простой CSS3 слайдер изображений (без JavaScript!)

HTML

<div class="container">
<img src="img5" alt="img5">
<img src="img4" alt="img4">
<img src="img3" alt="img3">
<img src="img2" alt="img2">
<img src="img1" alt="img1">
</div>

CSS

.container {
position:relative; width:200px; height:150px;}
.container img {
position:absolute; top:0; left:0;}
.container:hover img {
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: slider;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;}
@-webkit-keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}}
@keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}}
.container img:nth-child(1) {-webkit-animation-delay: 8s; animation-delay: 8s;}
.container img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;}
.container img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;}
.container img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.container img:nth-child(5) {-webkit-animation-delay: 0s; animation-delay: 0s;}

20: Расширенный CSS3 слайдер изображений (без JavaScript!)

HTML

<div class="container">
<img src="img5" alt="img5">
<img src="img4" alt="img4">
<img src="img3" alt="img3">
<img src="img2" alt="img2">
<img src="img1" alt="img1">
<p class="hovertext">Hover here</p>
</div>

CSS

.container {
position:relative; width:200px; height:150px;}
.container img {
position:absolute; top:0; left:0; opacity:0;}
.container:hover img {
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 10s; animation-iteration-count: infinite;}
@-webkit-keyframes slider {
0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}}
@keyframes slider {
0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}}
.container img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.container img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.container img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.container img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.container img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}

.container .hovertext {
position: absolute; top:60px; left:30px;
font-size:1.5em; color: rgba(255,255,255,1);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.container:hover .hovertext {
top:20px; color: rgba(255,255,255,0);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}

21: Эффект встряхивания изображения

@-webkit-keyframes shakeit {
0% { -webkit-transform: rotate(0deg) translate(2px, 1px); }
10% { -webkit-transform: rotate(2deg) translate(1px, 2px); }
20% { -webkit-transform: rotate(-2deg) translate(3px, 0px) ; }
30% { -webkit-transform: rotate(0deg) translate(0px, -2px); }
40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); }
50% { -webkit-transform: rotate(2deg) translate(1px, -2px); }
60% { -webkit-transform: rotate(0deg) translate(3px, -1px); }
70% { -webkit-transform: rotate(2deg) translate(-2px, -1px); }
80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); }
90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); }
100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); }}
@keyframes shakeit {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }}
.shakeit img:hover {
-webkit-animation-name: shakeit;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: shakeit;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;}

22: Изменение цвета и радиуса углов

@-webkit-keyframes changes {
0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;}
20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;}
30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;}
40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;}
50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;}
60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;}
70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;}
80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;}
90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;}
100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}}
@keyframes changes {
0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;}
20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;}
30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;}
40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;}
50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;}
60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;}
70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;}
80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;}
90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;}
100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}}
.changes:hover {
-webkit-animation-name: changes;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: changes;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;}

23: Преобразование формы

.container {
width:200px;
height:150px;
position:relative;}
.textarea {
background-color:#FFF;
top:50px;
left:25px;
width:160px;
height:35px;
position:absolute;
border: 2px solid #333;
box-shadow: 0px 0px 15px #000;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}
.textarea:focus {
background-color:#000030;
top:0;
left:0;
height:150px;
width:200px;
border-radius:5px;
border: 2px solid #d4d0ba;
box-shadow: 0px 0px 15px #FFFFFF;}

24: Расширяющийся блок для кода

HTML

<div class="container outer"> <div class="inner">
Content with test-linebreaks: <br><br><br>
<br><br><br><br> Content ends here</div> </div>

CSS

.container {
position:relative;}
.container:after {
text-align: center; position: absolute; background:#999;
top: 17px; right: -28px; width: 120px; height: 1.6em;
font-size: 1.1em; content: "TEXT";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.outer{
color: #000; background: #DDD; overflow: hidden;}
.outer:hover {
color: #FFF; background: #666; overflow: hidden;}
.inner {
max-height: 110px; overflow: auto;
-webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;}
.outer:hover > .inner {
max-height: 1200px;
-webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;}

25: HTML подсказка

HTML

<div class="container">
<img src="" alt="">
<div class="tooltip">
<p class="tooltiptxt">Got it!</p></div></div>

CSS

.tooltip {
position: relative; opacity: 0; color: #FFF;
top: -100px; left: 0px;
width: 180px; padding: 10px;
border-radius: 25px; -webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);
-webkit-transition: .5s; transition: .5s;
-webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.container .tooltip:after {
position: absolute; top: 100%; left: 45%; height: 0; width: 0;
border: 6px solid transparent; border-top: 6px solid rgba(0, 0, 30, 0.5);
content: "Awesome!"; white-space: nowrap; color:#DDD;
}
.container:hover .tooltip {
opacity: 1; top: -225px;
-webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}

Примеры с 18 по 25:

james-star.com