Menu
External JavaScript Transitions allow you to alter the behavior and appearance of an element — but only when there's a trigger, like a user hovering over the element. Once triggered, transitions can only move from an initial state to a final state.
after is not a valid value of transition . Instead put transition as a property of the :after selector. You can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.
CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.
after is not a valid value of transition.
Instead put transition as a property of the :after selector.
HTML
<div>Test</div>
CSS
div:after {
content:" - positive!";
position: relative;
opacity: 0;
top: -20px;
-webkit-transition: all 3s;
transition: all 3s;
}
div:hover:after {
opacity: 1;
top: 0px;
}
Demo
You can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.
CSS
div:after {
content:" - positive!";
position: relative;
opacity: 0;
top: -20px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
div:hover:after {
opacity: 1;
top: 0px;
-webkit-transition: all 3s;
transition: all 3s;
}
Demo
Here is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With