CSS transitions are another simple thing you can do that can add some “spice” to your websites. Take this menu animation, for example:
We build this in my latest SkillShare course and it not only “looks cool”, but it gives the user important visual feedback. These little things are how you start to make a website or application “feel” intuitive.
Anyway, transition properties are pretty straight-forward:
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}Here’s what each property is:
- transition-property is the property of the element to transition.
- transition-duration is how long the transition will last
- transition-timing-function is the “effect” to use
- transition-delay is how long to wait before initiating the transition
You can also shorthand it like this:
div {
transition: width 2s linear 1s;
}This creates an effect like this:
So, like I said… pretty straight-forward.
Now, the menu effect I showed you above also involves using transform and translate3d to create the rotating icon. That can be a bit more tricky and takes some playing around with, but once you get it… it’s pretty simple.
Anyway, if you want to learn all this stuff…
It’s in my latest course on SkillShare.
Along with learning how to use AJAX to submit form data, building a PHP script to process that data and return a JSON response, building a responsive grid system with CSS grid and more.
The link to get no-cost access is here: https://skl.sh/2xM6Y3l
Later,
John
