Why Transition properties does not work with display properties ?
When we want to use transition for display:none to display:block, transition properties do not work. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.
So for animation, we use keyframes CSS.
@keyframes animationname {keyframes-selector {css-styles;}}
What does keyframes do?
The @keyframes rule specifies the code for animation. When one set of CSS style is changed to another set of CSS style, the animation is created and specify whenever the style changes. It can be in percent or with the keywords “from” and “to”, which will be equivalent to 0% and 100%. Here 0% is the beginning of the animation and 100% is the end of the animation.
Which Browser supports keyframes and what is prefix for that browser?
- Chrome & safari=> -webkit-
- Mozilla => -moz-
- Opera => -o-
Code snippet:
HTML
<!DOCTYPE html><html> <head> <style> html, body { height: 100%; padding: 0; font: 20px/40px sans-serif; } h1 { padding: 20px; } div { width: 100%; background: pink; padding: 20px; display: none; } body:hover div { display: block; -webkit-animation: slide-down 2.3s ease-out; -moz-animation: slide-down 3.3s ease-out; } @-webkit-keyframes slide-down { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes slide-down { 0% { opacity: 0; } 100% { opacity: 1; } } </style></head> <body> <h1>Hover me</h1> <div>Hello</div></body> </html> |
Output:
Please Login to comment...