During a recent collaboration with fellow designers, they shared some CSS animation examples from CodePen that needed to be integrated into our current project. The animations ranged from simple to complex, like the following:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: black;
}
.music {
display: inline-flex;
align-items: center;
justify-content: space-between;
position: relative;
width: 300px;
height: 200px;
}
.music .bar {
width: 12px;
height: 2px;
border-radius: 10px;
background-color: white;
animation: up_down 1.5s ease-in-out infinite;
}
@keyframes up_down {
0%,
100% {
height: 2px;
}
50% {
height: 80px;
}
}
.music .bar:nth-child(1) {
background-color: purple;
animation-delay: 1s;
}
.music .bar:nth-child(2) {
background-color: crimson;
animation-delay: 0.8s;
}
.music .bar:nth-child(3) {
background-color: deeppink;
animation-delay: 0.6s;
}
// More bar styles...
<div class='music'>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>
</div>While I had previously created animations using Flutter Canvas, I am now curious if there is a more efficient way to incorporate CSS animations into a Flutter project (something that was once straightforward for websites).