Эффекты анимации на CSS animation keyframes

Сборник примеров анимации на CSS 3 Animation.

<div class="animate-grow">Текст</div>
HTML
.animate-grow {
	height: 72px;
	line-height: 72px;
	background: #E41931;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	animation: animate_grow 2s infinite;
}
.animate-grow:hover {
	animation: none;
}

@keyframes animate_grow {
	0% {
		transform: scale3d(1, 1, 1);
	}
	50% {
		transform: scale3d(1.05, 1.05, 1.05);
	}
	100% {
		transform: scale3d(1, 1, 1);
	}
}
CSS

Результат:

<div class="animate-reduce">Текст</div>
HTML
.animate-reduce {
	height: 72px;
	line-height: 72px;
	background: #E41931;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	animation: animate_reduce 2s infinite;
}
.animate-reduce:hover {
	animation: none;
}

@keyframes animate_reduce {
	0% {
		transform: scale3d(1, 1, 1);
	}
	50% {
		transform: scale3d(0.95, 0.95, 0.95);
	}
	100% {
		transform: scale3d(1, 1, 1);
	}
}
CSS

Результат:

<div class="animate-motion">Текст</div>
HTML
.animate-motion {
	height: 72px;
	line-height: 72px;
	background: #E41931;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	animation: animate_motion 5s 0s both infinite;
}
.animate-motion:hover {
	animation: none;
}

@keyframes animate_motion {
	0%, 20% {
		transform: translate3d(0, 0, 0);
	}
	10%, 14%, 18%, 2%, 6% {
		transform: translate3d(-7px, 0, 0);
	}
	12%, 16%, 4%, 8% {
		transform: translate3d(7px, 0, 0);
	}
}
CSS

Результат:

<div class="animate-pulse">Текст</div>
HTML
.animate-pulse {
	height: 72px;
	line-height: 72px;
	background: #E41931;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	animation: animate_pulse 1.5s infinite;
}

.animate-pulse:hover {
	animation: none;
}

@keyframes animate_pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(228, 25, 49, 0.4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(228, 25, 49, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(228, 25, 49, 0);
	}
}
CSS

Результат:

Второй вариант

<div class="animate-pulse2">Текст</div>
HTML
.animate-pulse2 {
	height: 72px;
	line-height: 72px;
	background: #E41931;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	animation: animate_pulse2 2s infinite;
}
.animate-pulse2:hover {
	animation: none;
}

@keyframes animate_pulse2 {
	0% {
		box-shadow: 0 0 0 0 rgb(228,25,49,0);
	}
	70% {
		box-shadow: 0 0 0 20px rgb(228,25,49,0.1);
	}
	100% {
		box-shadow: 0 0 0 0 rgb(228,25,49,0);
	}
}
CSS

Результат:

<div class="animate-fading">Текст</div>
HTML
.animate-fading {
	height: 72px;
	line-height: 72px;
	background: #E41931;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	animation: animate_fading 2s infinite;
	animation-timing-function: linear;
}
.animate-fading:hover {
	animation: none;
}

@keyframes animate_fading {
	0% {
		opacity: 1;
	}
	25% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.1;
	}
	75% {
		opacity: 0.6;
	}
	100% {
		opacity: 1;
	}
}
CSS

Результат:

<div class="animate-gradient">Текст</div>
HTML
.animate-gradient {
	height: 72px;
	line-height: 72px;
	border-radius: 20px;
	font-weight: bold;
	font-size: 22px;
	padding: 20px;
	text-align: center;
	color: #FFFFFF;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: animate_gradient 5s ease infinite;
}
.animate-gradient:hover {
	animation: none;
}

@keyframes animate_gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
CSS

Результат:

18.12.2020
10940
Следующая запись Массив $_FILES

Комментарии

, чтобы добавить комментарий.

Другие публикации

Наложение градиента на изображение
Еще один способ сделать эффект смешивания градиента и изображения, основан на свойстве background-blend-mode. Минус...
3523
0
Рамки блоков с градиентом
Примеры, как сделать рамку блока с градиентом и анимировать её.
3058
0
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
19593
0
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
38581
+4
Плавное увеличение фонового изображения
В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
4351
+1
Защита текстов от копирования
Примеры защиты от копирования текста с сайта, добавление копирайта при копировании и отключение выделения текста в браузере. Методы обхода этих ограничений.
7670
+2