PHPnews.io

Star Wars Scene Transition Effects in CSS

Written by Bram.us / Original link on Jun. 7, 2022

death-star-jyn-erso.jpeg

You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it.

Uses gradients set as a mask-image which transition on hover. For the iris and clock wipte effects, @property is used.

Star Wars Scene Transition Effects in CSS →

bram bram link tutorialzine effect bram bram

« Re-evaluating technology - Dark Mode Toggles Should be a Browser Feature »