css keyframes animation not initializing

Question

I've got a css @keyframe animation I'm trying to initiate but it never starts... What am I doing wrong?

@-webkit-keyframes slideNotificationsHide {
   0%{ width:70%; }
   100%{ width:94%; left:0; right:0; }
}

#left-container{ 
 position:aboslute; 
 top:0px; right:30%; 
 width:70%; height:100%; 
 border:1px solid green; 
 background:#eee; 
}

#left-container:target{ 
    background:green; 
    -webkit-animation: slideNotificationsHide .6s ease-in-out linear forwards; 
    -moz-animation: slideNotificationsHide .6s ease-in-out linear forwards; 
    animation: slideNotificationsHide .6s ease-in-out linear forwards; 
}


<div id='left-container'></div>
<a href="#left-container">click to start animation</a>

Notice the background:green; attribute/property in the #left-container:target declaration. That portion actually works, so I know the :target is working; just not the animation.

Christofer Vilander · Accepted Answer · 2013-05-10 22:30:59Z

1

You have defined both animation-timing-function: linear; and animation-timing-function: ease-in-out; and you also had a typo in the #left-container{ position:aboslute;}

I've fixed the typo and removed animation-timing-function: linear; - is this how you want it ? Demo

Hope this helps.

edited May 10, 2013 at 22:30

answered May 10, 2013 at 21:03

Christofer Vilander

18.2k6 gold badges33 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sadmicrowave Over a year ago

Awesome! That works perfectly. How would you go about stretching the left-container and then getting it to go back (with another click of course) all from using the same clickable link (like the anchor I've already got in the fiddle) with pure CSS? That's my next dilemma....

Christofer Vilander Over a year ago

If you are looking for a click event I would suggest you using JavaScript instead. But, if you really just want to use pure CSS there are some hacks/tricks available, but I wouldn't recommend them for a live environment. Here's a post on CSS click events - tympanus.net/codrops/2012/12/17/css-click-events Glad I could help!

Collectives™ on Stack Overflow

css keyframes animation not initializing

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related