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

<div class="animate-grow">Текст</div>

.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);
	}
}

<div class="animate-reduce">Текст</div>

.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);
	}
}

<div class="animate-motion">Текст</div>

.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);
	}
}

<div class="animate-pulse">Текст</div>

.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);
	}
}

<div class="animate-pulse2">Текст</div>

.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);
	}
}

<div class="animate-fading">Текст</div>

.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;
	}
}

<div class="animate-gradient">Текст</div>

.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%;
	}
}