kagehina

Haikyuu CSS Animation

Haikyuu is a Japanese shonen manga series written and illustrated by Haruichi Furudate which is based on the sports genre. Hinata Shouyou is a short heightened boy who is well determined to become the next big thing in the High School Volleyball club by gaining the title of “Little Giant“. Thus he decides to join the Karasuno Volleyball club to achieve his dreams.

Karasuno was once the most consistent team but in the course of time, this team lost its momentum. Karasuno with their continuous defeats got nicknamed “Fallen crows“.

With the arrival of Hinata and Kageyama, these fallen crows were able to Fly High again. Check out the CSS animation for the Rise of Fallen Crows Karasuno.

Hinata Shouyou and Kageyama Tobio

The lethal duo Hinata Shouyou and Kageyama Tobio are the backbones of Karasuno Volleyball Club. The contribution of these two lead Karasuno to Nationals. Of Course, the entire team is to be credited. After all, there are 6 players on the volleyball court, the team with the best 6 takes the prey and Karasuno is one such team. Hinata and Kageyama went on from being opponents to one of the best Anime duos. This duo never failed to amaze their opponents with their fast weird attack(spike). Hinata Shouyou the spiker is inevitable in presence of Kageyama Tobio the prodigy setter.

Every time you see Hinata, you will feel like doing something. That’s the kind of aura he creates which is very influential. Haikyuu might be sports anime but yet it provides the best motivational quotes. As it is based on sports, you will feel happy if your favorite team wins but at the same time, you will feel sad for the losing team it’s just you can’t hate any team in Haikyuu.

CSS animation

Fly is the tagline of the Karasuno Volleyball Club. The clipped crows can fly again. With help of CSS, you can create amazing animation effects such as changing the background color/image, change in width, image motions, 3D models, and many more. CSS is responsible to design creative web pages. You can learn CSS here.

You can learn more about CSS animation here.

In this simple CSS animation, we will make multiple crows fly high. In a match against team Nekoma, we get to witness this epic scene of Hinata and Kageyama.

“The clipped crows can fly again, Observe the old warhouse Karasuno is back”

Ittetsu Takeda 

Multiple Image Animation in CSS

The animation could look lame if we use just one crow image to fly. CSS3 provides the feature of animating different images with stunning transition effects. You can animate different images by changing their width and by giving different animation delays. You can also set the initial position of the image with top, right, left, and button keywords. Since we are using animation of crows the initial position of the image will be bottom and then you can provide transition effects to it at different delays. It’s obvious if crows fly there shall be feathers that will fall back down. We can even use the CSS animation on feathers and translate it downwards by initializing the image to the top.

/* Individual delay for Feather Annimation */

.kagehina img:nth-child(1) {
    animation-delay: 1.9s;
}

.kagehina img:nth-child(2) {
    animation-delay: 2s;
}

.kagehina img:nth-child(3) {
    animation-delay: 5s;
}

/* Individual delay for Crows Annimation */

.karasuno img:nth-child(1) {
    animation-delay: 0s;
}

.karasuno img:nth-child(2) {
    animation-delay: 3s;
}

.karasuno img:nth-child(3) {
    animation-delay: 5s;
}

Now that the animation of fast attack duo Kageyama and Hinata is created you can convert this CSS file to a GIF file. Here is the GIF of the above code

Final Result

Conclusion

Haikyuu is an amazing sports anime, an anime where you literally can’t hate any characters and on other hand, it’s even difficult to choose the top 5 favorite characters from Haikyuu anime. Karasuno team is my favorite team from Haikyuu anime, so this animation code is the contribution to fallen crows or flightless champs, who can Fly High again.

Download the source code of Haikyuu CSS animation. Did you get any errors? Reach out to me at GitHub.

Credits: Images created using Carbon

1 thought on “Haikyuu CSS Animation”

Comments are closed.