JSFiddle - React, Tailwind, and code Playground
HTML
<div class="navbar">
<a href="#">Тест</a>
</div>
<div class="slider">
Text
</div>
CSS
.navbar {
background-color: rgba(0, 0, 0, 0.9);
position: fixed;
width: 100%;
text-align: center;
top: 0;
font-size: 30px;
opacity: 0.99;
}
.navbar a {
color: #FF0000;
text-decoration: none;
}
.slider {
background-color: rgba(0, 0, 255, 0.9);
margin-top: 50px;
text-align: center;
color: #fff;
width: 100%;
font-size: 20px;
}
.animated {
-webkit-animation: cd-pulse 3s infinite;
-moz-animation: cd-pulse 3s infinite;
animation: cd-pulse 3s infinite;
}
@-webkit-keyframes cd-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@-moz-keyframes cd-pulse {
0% {
-moz-transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-moz-transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-moz-transform: translateY(-50%) scale(0);
opacity: 0;
}
}
@keyframes cd-pulse {
0% {
-webkit-transform: translateY(-50%) scale(1);
-moz-transform: translateY(-50%) scale(1);
-ms-transform: translateY(-50%) scale(1);
-o-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
opacity: 1;
}
40% {
-webkit-transform: translateY(-50%) scale(0.9);
-moz-transform: translateY(-50%) scale(0.9);
-ms-transform: translateY(-50%) scale(0.9);
-o-transform: translateY(-50%) scale(0.9);
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
100% {
-webkit-transform: translateY(-50%) scale(0);
-moz-transform: translateY(-50%) scale(0);
-ms-transform: translateY(-50%) scale(0);
-o-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
opacity: 0;
}
}
JavaScript
setInterval(function() {
if ($('.slider').hasClass('animated'))
$('.slider').removeClass('animated');
else
$('.slider').addClass('animated');
}, 3000);