Animation using only CSS3 animations, keyframe & box-shadow
CSS Animations
CSS is a powerful tool and plays a vital role in decorating a webpage. There is not doubt animated elements on website can take the loading experience to the next level.
Thanks to CSS keyframes rule, which gives more control over the intermediate steps of the animation sequence. In this tutorial, we will create animated gradient background along with floating animated element.
HTML
<body>
<div class="floating-box">
<h1> <span>CSS</span> Animations</h1>
<p>CSS Gradient background animation and Floating Animation</p>
</div>
</body>
</html>CSS
*{
box-sizing: border-box;
}
body {
background: linear-gradient(-45deg, #ee7752, #fad8cd);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
height: 100vh;
font-family: Nunito;
}
.floating-box{
background: white;
border-radius: 30px;
display: flex;
flex-direction: column;
height: 210px;
/* Choosing margin for my blog post purposes :)*/
margin: 15% auto;
padding: 35px 28px;
width: 400px;
opacity: .9;
animation: float 6s ease-in-out infinite;
}h1{
margin: 0;}p{
font-size: 1.4rem;
color: gray;}span{
text-decoration: underline;
text-decoration-color: #ee7752;
text-decoration-thickness: 2px;
text-underline-position: under;
}@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(51, 50, 50, 0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(39, 38, 38, 0.2);
transform: translatey(-20px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(52, 51, 51, 0.6);
transform: translatey(0px);
}
}
Result
I hope you guys found this tutorial helpful! This was my first post ever on my blog.
