I want to have two animations applied to an element. These animations will execute sequentially infinite number of times. I want to use pure CSS without JS.
#keyframes show {
from,
to {
z-index: 100;
}
}
#keyframes wait {
from,
to {
}
}
.block {
position: absolute;
z-index: -100;
width: 100px;
height: 100px;
border: 1px solid black;
animation: 1s show infinite, 1s wait infinite;
}
.block-a {
background-color: red;
animation-delay: 0s, 1s;
}
.block-b {
background-color: purple;
animation-delay: 1s, 2s;
}
.block-c {
background-color: yellow;
animation-delay: 2s, 3s;
}
<div class="container">
<div class="block block-a">1</div>
<div class="block block-b">2</div>
<div class="block block-c">3</div>
</div>
Here is my current solution on codepen: https://codepen.io/olafvolafka/pen/oNpPeqj
The issue is the animation stops after the last animation and doesn't repeat.
Here below you will see an implementation of A Haworth's Comment to enforce the z-index at the end of each animation iteration to return to the same value it was at the start (this case: -100).
Doing this is with the keyframe 50% setting the z-index at the front (100) . So that when each animation ends the properties are identical to when it began.
The animation is also set to cycle/repeat every 3 seconds rather than every 1 second as per your original code. This is that each iteration of the animation should run and complete before being called again; so 3 blocks means it runs for 3s. Each block having 1second as per your delay values in each blocks own class CSS code.
I have removed the wait animation because it simply didn't do anything. If you want an animation to wait there are various ways of doing this, not least with keyframes and animation-delay.
#keyframes show {
from {
z-index: -100;
}
50% {
z-index: 100;
}
to {
z-index: -100;
}
}
.block {
position: absolute;
z-index: -100;
width: 100px;
height: 100px;
border: 1px solid black;
animation: 3s show infinite;
}
.block-a {
background-color: red;
animation-delay: 0s;
}
.block-b {
background-color: purple;
animation-delay: 1s;
}
.block-c {
background-color: yellow;
animation-delay: 2s;
}
<div class="container">
<div class="block block-a">1</div>
<div class="block block-b">2</div>
<div class="block block-c">3</div>
</div>
I'm fairly new to learning CSS and have been playing with some animation and things.
In my CSS, I have the same thing repeating again and again, but with a difference of 0.1. It's animation-delay: 0.1s, this increases in increments of 0.1s.
Do I have to type the code like I have in my example. Or is there a way I can tell it to increase by 0.1 for the next class? Or should I have done this differently?
The reason is that I wanted to create about 50 of these squares to see what it looks like. I don't really want to type out 50 classes and then change the increments to 0.2 for each class, I would have to change it 50 times. I'm sure there's a better way to do this?
Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#keyframes mycolour {
from {height: 100px;}
to {height: 150px;}
}
.first, .second, .third, .fourth, .fifth, .sixth, .seventh, .eighth, .ninth, .tenth {
width: 100px;
height: 100px;
float: left;
animation-name: mycolour;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: red;
}
.second {
animation-delay: 0.1s;
}
.third {
animation-delay: 0.2s;
}
.fourth {
animation-delay: 0.3s;
}
.fifth {
animation-delay: 0.4s;
}
.sixth {
animation-delay: 0.5s;
}
.seventh {
animation-delay: 0.6s;
}
.eighth {
animation-delay: 0.7s;
}
.ninth {
animation-delay: 0.8s;
}
.tenth {
animation-delay: 0.9s;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
<div class="sixth"></div>
<div class="seventh"></div>
<div class="eighth"></div>
<div class="ninth"></div>
<div class="tenth"></div>
</body>
</html>
Like someone suggested earlier, javascript is the best option:
If you do happen to learn jquery first this is a simple solution to your problem written in jquery (although its mostly plain ol' javascript).
// CHANGE THE NUMBER 4 IN THE NEXT LINE TO THE NUMBERS OF DIVS YOU HAVE
for (var i = 1; i <= 4; i++) {
var div = ".div"+i;
var value = "."+i+"s";
$(div).css("animation-delay", value);
}
#keyframes mycolour {
from {height: 100px;}
to {height: 150px;}
}
div {
width: 100px;
height: 100px;
float: left;
animation-name: mycolour;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: red;
animation-delay: .1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
I am wondering if there is a way in full CSS to reproduce the following animation (the tool-tip box that appears and disappears) and appears again.
I wanted it to be recursive
http://bourbon.io/
You can do this using animations properties (with a custom animation).
Example:
HTML
<div id="container">
<div id="animatediv">
</div>
</div>
CSS
#container {
background-color: yellow;
display: inline-block;
padding: 40px;
}
#animatediv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: hideshow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes hideshow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here's a jsfiddle:
https://jsfiddle.net/fabio1983/j6jj9766/
You can also check this page for more informations:
https://www.w3schools.com/css/css3_animations.asp
I have a slideshow where pictures crossfade automatically in a loop. It is set so that 3 pictures are scrolling.
Demo in Codepen (http://codepen.io/lopis/pen/VYRoKE)
<section class="crossfade">
<article class="slide">
<img src="http://lorempixel.com/400/200/people" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/cats" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/sports" alt="" />
</article>
</section>
The CSS:
$slideDuration: 4; // seconds
$slideNum: 3;
#mixin loop($name, $duration, $delay) {
-webkit-animation: $name #{$duration}s #{$delay}s infinite;
-moz-animation: $name #{$duration}s #{$delay}s infinite;
animation: $name #{$duration}s #{$delay}s infinite;
}
#mixin slide() {
#for $i from 1 through $slideNum {
.slide:nth-child( #{$i} ) {
#include loop( crossfade, ($slideNum * $slideDuration), (($i - 1) * $slideDuration) );
}
}
}
#mixin keyframes() {
#-webkit-keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
}
.crossfade {
position: relative;
}
.slide {
position: absolute;
top: 0;
}
.slide:first-child {
position: static;
}
#include slide();
#include keyframes();
Is there a way to make an animation like this that would work with any number of slides using just CSS?
Edit: I understand that such dynamism is not intended in CSS but you can have some dynamic content, like by using calc(), etc.
Some libraries, as the one suggested in the comments, allow the use of mixins for this task. This is not what I'm looking for as it requires a rebuild of the source.
You can get this using only CSS, using a content responsive technique
Let's set a time for each slide of 2 seconds.
We need to set a staggered delay for every nth child of 2 seconds. That is easily acieved with nth-child.
Now, we need to increase the duration of the transition depending on the number of elements. Using this technique we achieve this easily.
The third issue is managing the fade-out. In the standard approach, that would involve changing the keyframes changing point, and it would be cumbersome. The trick to get this working with much less code, is to make a z-index movement in the animation itself. The elements are moving backward, and then we don't care about their opacity anymore
Example set only for 3 posible number of elements:
.container {
width: 100px;
height: 50px;
position: relative;
margin: 10px;
display: inline-block;
}
.element {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: anim 6s infinite;
}
.element:nth-child(1) {
background-color: lightyellow;
animation-delay: 0s;
}
.element:nth-child(2) {
background-color: lightgreen;
animation-delay: 2s;
}
.element:nth-child(3) {
background-color: pink;
animation-delay: 4s;
}
.element:nth-child(4) {
background-color: lightblue;
animation-delay: 6s;
}
.element:nth-child(5) {
background-color: coral;
animation-delay: 8s;
}
.element:nth-child(6) {
background-color: aliceblue;
animation-delay: 10s;
}
.element:nth-child(7) {
background-color: burlywood;
animation-delay: 12s;
}
.element:nth-child(8) {
background-color: bisque;
animation-delay: 14s;
}
.element:nth-child(9) {
background-color: beige;
animation-delay: 16s;
}
.element:nth-last-child(3):first-child,
.element:nth-last-child(3):first-child ~ .element {
animation-duration: 6s;
}
.element:nth-last-child(6):first-child,
.element:nth-last-child(6):first-child ~ .element {
animation-duration: 12s;
}
.element:nth-last-child(9):first-child,
.element:nth-last-child(9):first-child ~ .element {
animation-duration: 18s;
}
#keyframes anim {
0% { opacity: 0; z-index: 100;}
15% { opacity: 1;}
50% { opacity: 1;}
100% { opacity: 0; z-index: 1;}
}
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
<div class="element">SEVEN</div>
<div class="element">EIGHT</div>
<div class="element">NINE</div>
</div>
I need a pure CSS option to move something so it appears to be underneath a section of content only on particular widths.
I already have stylesheets set up for the breakpoints so can apply specific styling to my mobile width.
The page is a repeater of items each with a number, body text and icon. They alternate, the HTML goes from showing the icon on the left to showing the icon on the right. It needs to be this way, and cannot be floated, due to expansion of content and being repsonsive
Here is an example of the output on a desktop: JS Fiddle. Note it is responsive and there can be lots of text in the body text area and it will float. Perfect.
When going down to mobile, it changes a bit. The icon becomes full width and should sit UNDERNEATH the body content.
This sort of works. The problem is that the HTML shows the icon first in the DOM and then on the next repeat, it comes last.
How can I make it so that this div of icon moves location, without JavaScript? This is for mobile only, so perhaps CSS3 has a solution for this?
This is how it currently looks on mobile. You can see it is wrong, the icon needs to come underneath the text at all times. It needs to expand to the content and be completely responsive with no fixed height.
You can see that number 2, 4 etc are all correct with the icon showing underneath.
Thanks
You should be able to achieve this using flexbox and the flex-flow and order properties to change orientation and the element sequence.
The CSS to do the job for narrow devices would be like so:
http://codepen.io/cimmanon/pen/BJleF
.view-reasons .views-reasons-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.view-reasons .views-field-field-icon {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
Just place them within the appropriate media query. This will work for Opera, Chrome, IE10, Firefox, and pretty much every mobile browser other than Opera Mini (see: http://caniuse.com/#feat=flexbox).
I have reproduced your fiddle HERE
You will see 6 rows, and I believe that all are behaving the same.
The first 2 are from your original example.
In the remaining 4 I have changed your original class to "row"; and I have kept always the same order. Now, the style applied to make the even rows styled different is:
Most of the trick is to use absolute position for the image, and aligning it to the right. (Most of the remaining code is your's)
.row {
border-bottom:1px dotted #464637;
padding-bottom:15px;
margin-bottom:15px;
min-height: 150px;
}
.row .views-field-field-icon{
display:inline-block;
width:41%;
margin-right: 0;
}
.row:nth-child(even) .views-field-field-icon{
position: absolute;
right: 0px;
padding-right: 6%;
}
Or you can use css3 :nth-of-type selector, as well as vals' answer,
Look at this pen
(I did change your class names, but still you can follow, i think)
You can also resize the browser and see the changes via the media queries,
Without a script, you are not going to "move HTML blocks to different order," but with some tricky CSS you can make it appear as though you have.
Take a look at my personal website nicksaemenes.com (a work in progress - to state the obvious), to see if it accomplishes what it is you are attempting — I think it does. You can find all of the source code for it here on Github.
One thing that you should look into is why your HTML is alternating the order of icon/image and paragraph. I would suggest that this is a problem and that your source order should be consistent in this case.
While not taken quite as far as my published website, this Codepen shows the early stages of development for my site that may be a bit more digestible for understanding how I accomplished what it appears to me you are after.
section:after, .tweener:after, section .info-block:after {
content: "";
display: table;
clear: both;
}
section a, section:hover > div {
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
section a:hover, section:hover > div:hover {
-moz-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
}
html {
color: #666;
}
h1 {
color: #333;
padding: 2rem;
margin: 0;
text-align: center;
font-weight: normal;
}
h2 {
color: #444;
margin-top: 0;
}
p {
line-height: 1.8;
}
li:after {
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.5);
content: "Nick Anderson - flic.kr/ps/QG591";
padding: .5rem 1rem .5rem .5rem;
position: absolute;
bottom: 1rem;
right: 0;
font-size: 10px;
}
/* https://stackoverflow.com/questions/20150621/sass-mixin-for-animation-keyframe-which-includes-multiple-stages-and-transform-p/23861638#23861638
animation mixing
keyframe animation
#include animation('animation-name .4s 1')*/
html {
background: white;
padding: 1rem;
font-family: sans-serif;
}
section {
background: white;
max-width: 1024px;
margin: auto;
/* The Holy Grail of CSS Centering - http://webdesign.tutsplus.com/tutorials/the-holy-grail-of-css-centering--cms-22114 */
}
section a {
color: #666;
text-decoration: none;
padding: 1rem;
border: 1px solid;
float: left;
}
section a:hover {
background: #111;
border-color: transparent;
color: white;
opacity: .75;
}
section img {
width: 100%;
}
section p {
margin-top: 0;
text-align: left;
}
section .contained {
height: 70%;
margin: auto;
width: 100%;
}
section .outer {
display: table;
height: 100%;
width: 100%;
word-spacing: -1rem;
}
section .inner {
display: table-cell;
vertical-align: middle;
}
section .centered {
display: inline-block;
float: left;
position: relative;
width: 100%;
}
section:hover > div {
opacity: .5;
}
section:hover > div:hover {
opacity: 1;
}
/* The "Tweener" ... My addition to allow for cross-browser support of alternating element alignment of non-css-class-ified elements*/
.tweener {
direction: ltr;
display: inline-table;
height: auto;
width: 50%;
word-spacing: normal;
}
.tweener .inner {
width: 100% !important;
}
/*.tweener:nth-of-type(odd) .centered > * {
#include box-shadow(0 5px 1px -3px rgba(0,0,0,.2));
}*/
.text-block {
width: 80%;
float: right;
}
.tweener {
height: 100%;
vertical-align: middle;
width: 50%;
}
section .info-block {
border-bottom: 1px solid #ccc;
padding: 4rem 0;
}
section .info-block:last-of-type {
border: none;
}
section .info-block:nth-child(2n) .outer {
direction: rtl;
}
section .info-block:nth-child(2n) .text-block {
float: left;
}
.video-container {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
.video-container iframe,
.video-container object,
.video-container embed {
border: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#-webkit-keyframes xfade {
25% {
opacity: 1;
}
33% {
opacity: 0;
}
92% {
opacity: 0;
}
}
#-moz-keyframes xfade {
25% {
opacity: 1;
}
33% {
opacity: 0;
}
92% {
opacity: 0;
}
}
#-o-keyframes xfade {
25% {
opacity: 1;
}
33% {
opacity: 0;
}
92% {
opacity: 0;
}
}
#keyframes xfade {
25% {
opacity: 1;
}
33% {
opacity: 0;
}
92% {
opacity: 0;
}
}
section ul.xfade {
float: right;
list-style: none;
margin: 0;
padding: 0;
padding-top: 66.69922%;
position: relative;
width: 100%;
}
section ul.xfade li {
margin: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
section ul.xfade li:nth-child(3) {
-webkit-animation: xfade 12s 0s infinite;
-moz-animation: xfade 12s 0s infinite;
-o-animation: xfade 12s 0s infinite;
animation: xfade 12s 0s infinite;
}
section ul.xfade li:nth-child(2) {
-webkit-animation: xfade 12s 4s infinite;
-moz-animation: xfade 12s 4s infinite;
-o-animation: xfade 12s 4s infinite;
animation: xfade 12s 4s infinite;
}
section ul.xfade li:nth-child(1) {
-webkit-animation: xfade 12s 8s infinite;
-moz-animation: xfade 12s 8s infinite;
-o-animation: xfade 12s 8s infinite;
animation: xfade 12s 8s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(3) {
-webkit-animation: xfade 12s -1s infinite;
-moz-animation: xfade 12s -1s infinite;
-o-animation: xfade 12s -1s infinite;
animation: xfade 12s -1s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(2) {
-webkit-animation: xfade 12s 3s infinite;
-moz-animation: xfade 12s 3s infinite;
-o-animation: xfade 12s 3s infinite;
animation: xfade 12s 3s infinite;
}
section .info-block:nth-child(3n+2) ul.xfade li:nth-child(1) {
-webkit-animation: xfade 12s 7s infinite;
-moz-animation: xfade 12s 7s infinite;
-o-animation: xfade 12s 7s infinite;
animation: xfade 12s 7s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(3) {
-webkit-animation: xfade 12s -2s infinite;
-moz-animation: xfade 12s -2s infinite;
-o-animation: xfade 12s -2s infinite;
animation: xfade 12s -2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(2) {
-webkit-animation: xfade 12s 2s infinite;
-moz-animation: xfade 12s 2s infinite;
-o-animation: xfade 12s 2s infinite;
animation: xfade 12s 2s infinite;
}
section .info-block:nth-child(3n+3) ul.xfade li:nth-child(1) {
-webkit-animation: xfade 12s 6s infinite;
-moz-animation: xfade 12s 6s infinite;
-o-animation: xfade 12s 6s infinite;
animation: xfade 12s 6s infinite;
}
<!--All photo credits go to Nick Anderson flickr.com/nickanderson33-->
<h1> A collection of techniques I've picked up and put together over the past year or so</h1>
<section>
<div class="contained info-block">
<div class="outer">
<div class="tweener">
<div class="inner">
<div class="centered">
<ul class="xfade">
<li><img alt="dock" src="//c4.staticflickr.com/8/7019/6562781091_0c75a135f6_b.jpg" /></li>
<li><img alt="shack" src="//c4.staticflickr.com/8/7029/6562780531_d2a5be5157_b.jpg" /></li>
<li><img alt="flower" src="//c3.staticflickr.com/7/6006/5988132647_94f7193719_b.jpg" /></li>
</ul>
</div>
</div>
</div>
<div class="tweener">
<div class="inner">
<div class="centered">
<div class="text-block">
<h2>Vertical Centering</h2>
<p>Use any amount of text and any size photo. </p>
<p>If you shrink the window width you'll see that when the image height is smaller than the text height, the two elements will remain vertically centered with each other. </p>
<p>This is a modified version of ... </p>
The Holy Grail of CSS Centering
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contained info-block">
<div class="outer">
<div class="tweener">
<div class="inner">
<div class="centered">
<ul class="xfade">
<li><img alt="stained glass" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
<li><img alt="ring" src="//c4.staticflickr.com/8/7150/6722043431_b59b6f7d8f_b.jpg" /></li>
<li><img alt="sunflower" src="//c3.staticflickr.com/7/6182/6085971358_25fdd877b0_b.jpg" /></li>
</ul>
</div>
</div>
</div>
<div class="tweener">
<div class="inner">
<div class="centered">
<div class="text-block">
<h2>Alternating Alignment of Elements</h2>
<p>The HTML structure per row is consistent - image then text.</p>
<p>Typically, you can accomplish the alternating alignment of elements with floats, but in this case, floating elements removes their ability to be vertically centered - Boo! </p>
<p>Thus, I employed some ol' RTL trickery. I had to include one additional div (with the "tweener" class) to make this happen, but in the end I think it is worth it. Especially since it works in all modern browers.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contained info-block">
<div class="outer">
<div class="tweener">
<div class="inner">
<div class="centered">
<ul class="xfade">
<li><img alt="flooded" src="//c3.staticflickr.com/3/2264/5814476694_4ea5265e3a_b.jpg" /></li>
<li><img alt="shooting" src="//c4.staticflickr.com/4/3237/5872035040_cfc7f77cb8_b.jpg" /></li>
<li><img alt="truck" src="//c4.staticflickr.com/8/7358/8779551390_85fbae4bfb_h.jpg" /></li>
</ul>
</div>
</div>
</div>
<div class="tweener">
<div class="inner">
<div class="centered">
<div class="text-block">
<h2>Pure CSS Image Rotator</h2>
<p>I snagged the initial code from Mark Lee, then made it work for me.</p>
<p>NOTE: If you use the CSS image rotator you'll want to make sure that your photos (of the same group) use the same aspect ratios.</p>
Mark's Pen
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contained info-block">
<div class="outer">
<div class="tweener">
<div class="inner">
<div class="centered">
<div class="video-container">
<iframe width="640" height="360" src="https://www.youtube.com/embed/cbSbbY5ibas?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="tweener">
<div class="inner">
<div class="centered">
<div class="text-block">
<h2>Responsive Embedded Video</h2>
<p>First off, both Kilian Martin and Brett Novak are incredible at what they do. Much respect.</p>
<p>Lifted from the Smashing Magazine article describing how to make iframes responsive</p>
Smashing Article
</div>
</div>
</div>
</div>
</div>
</div>
<div class="contained info-block">
<div class="outer">
<div class="tweener">
<div class="inner">
<div class="centered">
<ul class="xfade">
<li><img alt="couple" src="//c3.staticflickr.com/7/6007/5988700008_36d5dc34a9_b.jpg" /></li>
<li><img alt="stars" src="//c3.staticflickr.com/7/6025/5978705415_00f22c1e65_b.jpg" /></li>
<li><img alt="lake" src="//c3.staticflickr.com/7/6012/5979259078_f4c53fee72_b.jpg" /></li>
</ul>
</div>
</div>
</div>
<div class="tweener">
<div class="inner">
<div class="centered">
<div class="text-block">
<h2>Different Transitions for Hover On / Hover Off</h2>
<p>A subtle, but classy way to add that extra shine to your site is to use different transitions for hover on vs. hover off. The links in this demo have a transition duration of .1s for the hover on, but .5s for the hover off. You have to be careful with this as it can be an unexpected behavior that leads to the impression that something isn't working correctly, but I believe that misperception can only be fought with good design decisions and time. </p>
<p>Also, if you don't know of Chris Coyier, you have either been living under a rock or you are not a web designer. </p>
CSS-Tricks Article
</div>
</div>
</div>
</div>
</div>
</div>
</section>