css keyframes animation not initializing - css

I've got a css #keyframe animation I'm trying to initiate but it never starts... What am I doing wrong?
http://jsfiddle.net/sadmicrowave/VKzXp/
#-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>
click to start animation
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.

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.

Related

Angular Ui Router + Animate.css

viewanimation on state change withanimate.css`
But when writing this:
<div ui-view class="view-animation"></div>
//(sass)
.view-animation{
&.ng-enter {
-webkit-animation: fadeInLeft 2s;
-moz-animation: fadeInLeft 2s;
-ms-animation: fadeInLeft 2s;
animation: fadeInLeft 2s;
}
&.ng-leave {
-webkit-animation: bounceOut 1s;
-moz-animation: bounceOut 1s;
-ms-animation: bounceOut 1s;
animation: bounceOut 1s;
}
}
There is 2 sec delay, and in the end content just appears(Similar if I do timeout and apply display:block via js), but animation is not visible.
But when writing this:
.view-animation.ng-enter,
.view-animation.ng-leave {
-webkit-transition:0.5s ease all;
transition:0.5s ease all;
}
.view-animation.ng-enter,
.view-animation.ng-leave.ng-leave-active {
opacity:0;
}
.view-animation.ng-leave,
.view-animation.ng-enter.ng-enter-active {
opacity:1;
}
All works fine
I've tried adding position:absolute; width: 100%; to .view-animation but didn't helped.
Thank you.
Update:
Applying fadeIn animation also works fine, maybe it have something to do with animations that use transform?
Update 2:
Ok inside my ui-view.view-animation I have an element with position fixed this cause animation break, is there is any workaround for this?
Update 3:
adding this to .view-animation
.view-animation{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
Solved my issue, if you have better solution please share.

Can CSS animations and CSS transitions be combined on the same property?

Case study: A set of <div> elements, with a :hover selector that enables a wobbling animation. But the wobble itself is jarring to just switch on and off. I want to transition into the animation.
This snippet is still jarring. The animation starts the boxes at -10 degrees because that's the most lightweight way to get a smooth wobble from left to right and back again.
body, div{
margin:10px;
}
div{
width:50px;
height:50px;
background-color:tan;
transition: transform 3s;
}
div:hover{
background-color:red;
animation: wobble 30s infinite;
}
#keyframes wobble{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
<div></div>
<div></div>
Even for faster animations I would like to be able to attenuate the non-linear action based on user interaction. Is it not possible with pure CSS? I was unsuccessful in finding other people talking about this sort of thing.
Two more examples... instead of behavior like this:
body, div{
margin:10px;
}
div{
width:50px;
height:50px;
background-color:tan;
transition: transform 3s;
}
div:hover{
background-color:red;
animation: wobble 0.2s infinite;
}
#keyframes wobble{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
<div></div>
<div></div>
I'd like to transition the movement to look like this (without so much code)
body, div{
margin:10px;
}
div{
width:50px;
height:50px;
background-color:tan;
transition: transform 2s;
}
div:hover{
background-color:red;
animation-name: wobble-up, wobble;
animation-duration: 1.2s, 0.2s;
animation-delay: 0s, 1.2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1, infinite;
}
#keyframes wobble-up{
000.0%{ transform:rotate( 0deg); }
008.3%{ transform:rotate( 1deg); }
016.7%{ transform:rotate(-2deg); }
025.0%{ transform:rotate( 3deg); }
033.3%{ transform:rotate(-4deg); }
041.6%{ transform:rotate( 5deg); }
050.0%{ transform:rotate(-6deg); }
058.3%{ transform:rotate( 7deg); }
066.7%{ transform:rotate(-8deg); }
075.0%{ transform:rotate( 9deg); }
083.3%{ transform:rotate(-10deg); }
091.7%{ transform:rotate( 11deg); }
100.0%{ transform:rotate(-12deg); }
}
#keyframes wobble{
0%,100%{ transform:rotate(-12deg); }
50%{ transform:rotate(12deg); }
}
<div></div>
<div></div>

How to rotate div around itself using css3?

I am trying to implement rotation for all the divs inside my website. I need this functionality on mouse hover.
You can use animation
div {
width: 100px;
height: 100px;
background-color: #ddd;
margin-bottom: 10px;
transition: all 1s ease;
}
div:hover {
animation: rotate 1s forwards alternate linear
}
#keyframes rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
<div></div>
if you would like to make it with transition so you need to add to the main class the following:
transition:all 0.3s;
note: the 0.3s represents the time, you can change it to any number like 0.7s
then you will add the following to the :hover event
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
note: deg is representing how many degrees you want them to rotate, so you can add any number rather than 90deg like 360deg
I have created a jsfiddle for you check that out so, you get the ideas how rotation works.
div{
height:100px;
width:100px;
background-color:#000;
margin:50px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
div:hover{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-0-transform:rotate(45deg);
}
<div>
</div>

Hide an element after 5 seconds only CSS does not work on Firefox

For hiding an element after 5 seconds, I have used below code.
But it does not work in Firefox.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
There are some issues with the code above:
The animation is not the same for all browsers: one is animating the visibility (webkit), the other one is animation the overflow (standard).
The overflow property is not animatable.
Firefox has a history of issues with the visibility property (this is not your fault but a problem of Firefox itself, you can find many questions on SO related to it).
Because of the way in which you are running the animation (with a duration of 0s), you can trick Firefox by using the from in the CSS animation. The thing is that Firefox is not animating the visibility, but it will apply the style in the from part of the animation anyway, so you'll get the desired effect.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
#-webkit-keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
If the duration of the animation was higher than 0 seconds, this solution wouldn't work; but as the change is automatic, it works fine (and it will not affect the rest of the browsers).
The advantages of this solution:
The behavior is the same in all the browsers.
The hidden text is not selectable.
The disadvantages:
This is a workaround and not how things should be done.
It does not work if the duration of the effect is higher than 0s.
Try to use fixed width and height for your block (in % or px) and opacity instead visibility — http://jsfiddle.net/sergdenisov/wek6x4Ln/11/:
.classname {
width: 200px;
height: 50px;
-webkit-animation: css-animation 0s ease-in 5s forwards;
animation: css-animation 0s ease-in 5s forwards;
}
#-webkit-keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
#keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}

Shrink and grow an element using CSS3

I am trying to implement a grow and shrink effect on DIV element, this is working but the animation is working from left to right. Would like to make it from center.
Below I have placed the code, and here is the fiddle
.elem {
position:absolute;
top : 50px;
background-color:yellow;
left:50px;
height:30px;
width:30px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: grow;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
#-moz-keyframes grow {
from {
height:30px;
width:30px
}
to {
height:130px;
width:130px
}
}
How can I do this.
Use transform: scale(n) instead of changing the width/height
#keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(4.333);
}
}
Demo
You shouldn't need the browser prefixed versions at this point in time.
Keep in mind that scaling an element like an image to 4.3x its full size will make it blurry, so it might be better to make the default (1 / 4.3)x to start, then scale it up to 1 in the animation.

Resources