CSS Keyframe Animation

Posted on : 16th July 2022 | Author : @ByDev24

<link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap" rel="stylesheet">
<div class="code-container">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3">John Smith</div>
</div>

body{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
.code-container {
	width: 450px;
	max-width: 100%;
	padding: 10px;
	box-shadow: 0px 0px 10px #0000000d;
	border-radius: 10px;
}
.box1 {
    width: 50px;
    height: 50px;
    background: #0072ff;
    animation: anim1 2s forwards linear;
}
@keyframes anim1 {
    from{border-radius:0;transform:translateX(0) rotate(0deg);}
    to{border-radius:50%;transform:translateX(380px) rotate(360deg);}
}
.box2 {
    width: 50px;
    height: 50px;
    background: #ef00ff;
    margin-top: 20px;
    border-radius: 50%;
    animation: anim2 3s infinite cubic-bezier(0.4, 0, 1, 1);
}
@keyframes anim2{
    0%{transform:translate(0 0)}
    16%{transform:translate(50px, 20px)}
    33%{transform:translate(100px, -20px)}
    49%{transform:translate(150px, 20px)}
    65%{transform:translate(200px, -20px)}
    80%{transform:translate(250px, 20px)}
    100%{transform:translate(300px, -20px)}
}
.box3 {
    margin-top: 30px;
    text-align: center;
    font-size: 60px;
    font-weight: 900;
    animation: anim3 3s infinite linear;
}
@keyframes anim3{
    0%{color:#ff0000}
    20%{color:#ffb100}
    40%{color:#ff00f7}
    60%{color:#5600ff}
    80%{color:#a72d65}
    100%{color:#2da763}
}