The -transition- css property can be an extremely useful tool when combined with basic css properties. It’s super simple – with just a couple lines of code you can animate a static element’s hover or active states and create something a bit more enticing and interactive for the user to play with. This can improve your site’s UX with minimal effort.
See how the boxes below react on hover:
Examples
Up
Right
The HTML
1 2 3 |
<div id="box" class="right"></div> <div id="box" class="up"></div> <div id="box" class="expand"></div> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
* Styling the box */
#box{
width:50px;
height:50px;
background:#FD3068;
border: 4px solid white;
padding: 15px 0 0 15px;
color: #ffffff;
}
/* Creating the transition */
.right{
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transition-timing-function: ease-out;
transition-duration: 250ms;
-o-transition-timing-function: ease-out;
-o-transition-duration: 250ms;
}
.up{
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transition-timing-function: ease-out;
transition-duration: 250ms;
-o-transition-timing-function: ease-out;
-o-transition-duration: 250ms;
}
.expand{
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transition-timing-function: ease-out;
transition-duration: 250ms;
-o-transition-timing-function: ease-out;
-o-transition-duration: 250ms;
width: 50px;
}
/* Hover effect */
.right:hover{
margin-left:10px; /* Transition Function */
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transition-timing-function: ease-out;
transition-duration: 250ms;
-o-transition-timing-function: ease-out;
-o-transition-duration: 250ms;
}
.up:hover{
margin-top:-10px; /* Transition Function */
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transition-timing-function: ease-out;
transition-duration: 250ms;
-o-transition-timing-function: ease-out;
-o-transition-duration: 250ms;
}
.expand:hover{
width: 100px !important; /* Transition Function */
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
transition-timing-function: ease-out;
transition-duration: 250ms;
-o-transition-timing-function: ease-out;
-o-transition-duration: 250ms;
}
|
Examples
Up
Right
