This is not a tutorial about CSS transition effect and does no pretend to show the functionality of this CSS property. But anyway, if few words the css transition effect provide a way to control the speed of animation changes to CSS properties.
For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.
So lets return to the beautiful transition effect i was telling you. I´ve just seen this effect on Joomla control panel and I thought its just awesome. If you are using Joomla you know what I’m talking about. If not, here you can see a demo. So I tried to reproduce the transition effect on mouse hover. The css properties I use to achieve this cool effect are:
- css transition
- css border shadow
- css border radius
and added
- css rotate
- css positioning
- css before
- css after
Like I said Joomla uses a transition for the shadow and border properties to achieve the on hover animation, but I played a little bit more adding rotate effect, position animation, and I combined with a strange effect using the css “before” and “after” properties.
Please note that the CSS transition property is still in draft and is not supported by Internet Explorer. On the other hand, Firefox requires the prefix -moz-, Chrome and Safari requires the prefix -webkit- Opera requires the prefix -o-.
Playing around with CSS properties like “after’ and “before” it turn out to be peaty awesome. I have also did some testing with the “rotate” css property witch is quite cool.
See it for your self. Here is the CSS code:
|
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
#mylist div {float: left;} .bg1 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/CSS3-logo.jpg) center center no-repeat; width:200px; height:150px;} .bg2 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/android-logo.jpg) center center no-repeat; width:200px; height:150px;} .bg3 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/css3_logo.jpg) center center no-repeat; width:200px; height:150px;} .bg4 {background: url(http://tutorialspage.com/wp-content/uploads/2017/04/logo-html5-css3.jpg) center center no-repeat; width:200px; height:150px;} .position { position:relative; top:0; } .border { border:#CCCCCC 1px solid; -webkit-border-radius: 5px;/* WebKit */ -khtml-border-radius: 5px;/* Firefox */ -moz-border-radius: 5px;/* Opera */ border-radius: 5px;/* Standard */ } .transition { -webkit-transition: all 1s ease;/* WebKit */ -moz-transition: all 1s ease;/* Firefox */ -o-transition: all 1s ease;/* Opera */ transition: all 1s ease;/* Standard */ } .position:hover { position:relative; top:-10px; } .rotate:hover { -webkit-transform: rotate(10deg);/* WebKit */ -moz-transform: rotate(10deg);/* Firefox */ -o-transform: rotate(10deg);/* Opera */ ransform: rotate(10deg);/* Standard */ } .rotate360:hover { -webkit-transform: rotate(370deg);/* WebKit */ -moz-transform: rotate(370deg);/* Firefox */ -o-transform: rotate(370deg);/* Opera */ ransform: rotate(370deg);/* Standard */ } .shadow:hover { -webkit-box-shadow: -10px 10px 35px #888;/* WebKit */ -moz-box-shadow: -10px 10px 35px #888;/* Firefox */ -o-box-shadow: -10px 10px 35px #888;/* Opera */ box-shadow: -10px 10px 35px #888;/* Standard */ } .border:hover { -webkit-border-bottom-left-radius:70px 20px;/* WebKit */ -moz-border-bottom-left-radius:70px 20px;/* Firefox */ -o-border-bottom-left-radius:70px 20px;/* Opera */ border-bottom-left-radius:70px 20px;/* Standard */ } .before::before { background-color:none; background-image:url(http://tutorialspage.com/wp-content/uploads/2017/04/screw.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-12px; -webkit-border-radius: 50%;/* WebKit */ -moz-border-radius: 50%;/* Firefox */ -o-border-radius: 50%;/* Opera */ border-radius: 50%;/* Standard */ -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* WebKit */ -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Firefox */ -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Opera */ box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; /* Standard */ -webkit-transition: all 1s ease;/* WebKit */ -moz-transition: all 1s ease;/* Firefox */ -o-transition: all 1s ease;/* Opera */ transition: all 1s ease;/* Standard */ } .before:hover::before { top:50%; margin-top:-9px; -webkit-transform: rotate(-720deg);/* WebKit */ -moz-transform: rotate(-720deg);/* Firefox */ -o-transform: rotate(-720deg);/* Opera */ transform: rotate(-720deg);/* Standard */ } .before_shadow::after { width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-12px; content:""; -webkit-border-radius: 50%;/* WebKit */ -moz-border-radius: 50%;/* Firefox */ -o-border-radius: 50%;/* Opera */ border-radius: 50%;/* Standard */ -webkit-transition: all 1s ease;/* WebKit */ -moz-transition: all 1s ease;/* Firefox */ -o-transition: all 1s ease;/* Opera */ transition: all 1s ease;/* Standard */ -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* WebKit */ -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* Firefox */ -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* Opera */ box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;/* Standard */ } .before_shadow:hover::after { top:50%; margin-top:-9px; -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* WebKit */ -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Firefox */ -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;/* Opera */ box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; /* Standard */ } |
And here is a piece of the HTML code.
|
1 2 3 4 |
<div class="bg1 border transition shadow position rotate"></div> <div class="bg2 border transition shadow position rotate"></div> <div class="bg3 border transition shadow position rotate"></div> <div class="bg4 border transition shadow position rotate"></div> |
See Demo here