I'm trying to animate in CSS3 margins, which this site seems to say you can, but I can't get working.
I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working.
Click on a section to see animation toggle.
$(".section").click(function() {
$(this).toggleClass("open");
});
body{
background: #f1f1f1;
}
.section{
display: block;
background: #fff;
border-bottom: 1px solid #f1f1f1;
animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
margin: 20px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
<div class="section">Some content</div>
</div>
Here is a JSFiddle: http://jsfiddle.net/ybh0thp9/3/
You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/
transition: margin 700ms;
You need to add the transition property to the base element that you wish to animate.
You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children. I mean: you can't click on the element if it's hidden.
What you can do, though, is add opacity to the whole thing: http://jsfiddle.net/BramVanroy/ybh0thp9/9/
Or even prettier, with a transformation:
http://jsfiddle.net/BramVanroy/ybh0thp9/10/
.section {
margin: 0;
opacity: 0.7;
transform: scale(0.85);
transition: all 700ms;
}
.section.open {
margin: 20px 0;
opacity: 1;
transform: scale(1);
}
Per comment, you want to fade in the elements on page load. We can do that by adding a class init.
http://jsfiddle.net/BramVanroy/ybh0thp9/12/
$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS
With keyframes: http://jsfiddle.net/BramVanroy/ybh0thp9/14/
#-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
#-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
#keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
-webkit-animation: fadeIn 1.5s ease;
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;
Tip for using transitions if it still isn't working...
Make sure you're not setting two separate transitions for different properties like this:
transition: margin 1000ms ease-in-out;
transition: box-shadow 1000ms ease-in-out;
It's obvious what's happening when looking in your browser's debugging tools:
The box-shadow will animate as intended, but margin isn't considered due to normal css rule handling.
The correct way is to combine the rules:
transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;
To create animations witch CSS3 you need to:
Create a class with animation attribute; to work in some browsers you need to put prefixes: -webkit-, -o-, -moz-.
Create animation keyframes
see the example:
.animate{
animation: myAnimation 10s;
animation-direction: alternate;
animation-play-state: running;
animation-iteration-count: infinite;
animation-delay: 0;
animation-timing-function: 1;
animation-direction: alternate;
-webkit-animation: myAnimation 10s;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-timing-function: 1;
-webkit-animation-direction: alternate;
-moz-animation: myAnimation 10s;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-timing-function: 1;
-moz-animation-direction: alternate;
-o-animation: myAnimation 10s;
-o-animation-direction: alternate;
-o-animation-play-state: running;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-timing-function: 1;
-o-animation-direction: alternate;
}
#keyframes myAnimation {
0% { margin-top: 0; margin-left: 50px}
25% { margin-top: 100px; margin-left: 50px }
50% { margin-top: 0; margin-left: 50px }
75% { margin-top: 100px; margin-left: 50px }
100% { margin-top: 0; margin-left: 50px }
}
#-webkit-keyframes myAnimation {
0% { margin-top: 0; margin-left: 100px}
25% { margin-top: 100px; margin-left: 100px }
50% { margin-top: 0; margin-left: 100px }
75% { margin-top: 100px; margin-left: 100px }
100% { margin-top: 0; margin-left: 100px }
}
#-moz-keyframes myAnimation {
0% { margin-top: 0; margin-left: 100px}
25% { margin-top: 100px; margin-left: 100px }
50% { margin-top: 0; margin-left: 100px }
75% { margin-top: 100px; margin-left: 100px }
100% { margin-top: 0; margin-left: 100px }
}
#-o-keyframes myAnimation {
0% { margin-top: 0; margin-left: 100px}
25% { margin-top: 100px; margin-left: 100px }
50% { margin-top: 0; margin-left: 100px }
75% { margin-top: 100px; margin-left: 100px }
100% { margin-top: 0; margin-left: 100px }
}
Related
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
display: none;
}
}
Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.
You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:
.title2 {
position: absolute;
top: 0;
right: 31%;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-delay: 2.5s;
animation-timing-function: ease-out;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
If you even toggle the display property from none to block, your transition on other elements will not occur. It's work only with displayed elements. If u want to hide element u can use opacity, height
.title2 {
width: 100px;
height: 50px;
background: red;
position: absolute;
top: 0;
right: 31%;
animation: 1s fadeOutOpacity ease-out;
opacity: 0
}
#keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="title2"/>
Project Description: I am in quest to apply two animations to a nested images inside a div that actually The Div has the responsibility to move the image up and down because the image is captivated inside it And the image(img) which is nested inside the div, Has the responsibility to rotate successively while the div is bouncing the image up and down.
What I want:
1.the image inside the div should keep rotating 360 degrees
2.While the 1 is happening, The div should keep bouncing or moving up and down
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: forwards;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
The problem: the bouncing process is awesome, but I dont know how to make the image rotating while it is bouncing.
Thanks.
Codepen Link
THE POST IS EDITED AND HAS NO PROBLEM AFTER APPLYING THE ANSWER
animation-iteration-count should be infinite on img rotation, to match the number of times it bounces as well, else the animation will run once and stop while the box is still bouncing. Also you have a typo, the semicolon in to {transform: rotate(360deg;)} should be outside to {transform: rotate(360deg);}. This is why it doesnt work.
Furthermore animation-direction:forwards is invalid, the correct value is animation-direction:normal.
With these corrections the code is:
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: normal;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
I have a very simple animation that fades out and shrinks a div.
But the problem is that when the animation finishes it goes back to the start and stays there.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
If you add animation-fill-mode: forwards; to your .fade-out rule it will fix your animation.
animation-fill-mode specifies how CSS rules should be applied before and after executing the animation. The default is none which means that before and after the animation is executed, it will not apply any of the animation styles. That's why you're seeing it revert to the pre-animation state.
forwards tells the browser to retain the styles from the last keyframe. That's what you're looking for.
See the MDN docs for more information.
div {
background-color: red;
height: 80px;
}
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; height: 0;}
}
<div class="fade-out">Style Test</div>
Use animation-fill-mode property
.fade-out {
animation-name: fade-out;
animation-duration: 2s;
animation-fill-mode: forwards
}
I am working on a project that calls for multiple animated, moving icons that will stop, expand, and move to position on mouseover. Is there a pure CSS way to get an element to seamlessly start from whatever (mid-animation) position they are at when the hover event begins and transition to the new final keyframe properties, rather than starting from a set initial state?
#keyframes drop {
from {top:-100px;}
to {top:100px;}
}
#keyframes freeze {
to {left:10px; width:700px;}
}
.droptext {
position:absolute;
width: 100px;
height: 100px;
background-color: red;
animation: drop 2s linear infinite;
-webkit-animation: drop 2s linear infinite;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.droptext:hover {
z-index:99;
-webkit-animation: freeze 2s linear 1s forwards;
-webkit-transition: top:10px;
}
Try this
.droptext:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
You can use animation-play-state: paused to pause the animation and expand the text on :hover with transition. Example:
#keyframes drop {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 300px;
}
100% {
top: 0;
left: 0;
}
}
.text {
width: 100px;
height: 20px;
position: relative;
padding: 20px;
border: 1px solid #ddd;
left: 0;
overflow: hidden;
white-space: nowrap;
transition: all .5s ease-in-out;
animation: drop 10s linear infinite;
}
.text:hover {
width: 400px;
height: 60px;
animation-play-state: paused;
transform: translate(-20px, 20px);
}
<div class="text">Lorem ipsum dolor sit amet blah blah</div>
Is it possible to give an element multiple animations with different durations using CSS3 animations?
What I want to have eventually is have the ball to keep rotating after finishing. I know I could do this with giving multiple classes. But I would like to avoid that to prevent messy amount of classes.
(the Fiddle might not work on other browsers than Chrome, I just rapidly hacked it together)
Fiddle example of what I have currently http://jsfiddle.net/cchsh6om/2/
Here's the CSS
div {
margin: 20px;
width: 100px;
height: 100px;
border-radius: 46px;
position: relative;
background: #ddd;
-webkit-animation-name: spin;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-name: spin;
-moz-animation-duration: 1000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: 1;
-ms-animation-timing-function: ease-out;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
span{
position: absolute;
line-height: 100px;
left:48%;
}
#-ms-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-ms-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-ms-transform: rotate(-360deg); }
}
#-moz-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-moz-transform: rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px; -moz-transform: rotate(-360deg); }
}
#-webkit-keyframes spin {
from {
opacity: 0;
margin-left: 200px;
-webkit-transform: rotate(0deg); }
to {
opacity: 1;
margin-left: 20px;
-webkit-transform: rotate(-360deg); }
}
#keyframes spin {
from {
opacity: 0;
margin-left: 200px;
transform:rotate(0deg);
}
to {
opacity: 1;
margin-left: 20px;
transform:rotate(-360deg);
}
}
And the HTML
<div><span>=</span></div>
Yes, it's possibly, but your syntax is wrong. First of all, use short notation like animation: horizontal linear 8s infinite (for more information read this acticle). Then you you can apply multiple animations separated by comma on the same element:
animation: horizontal linear 8s infinite,
vertical ease-in-out 1.3s infinite alternate,
blink linear .7s infinite alternate,
rotation linear .4s infinite;
and define keyframes for each one of them:
#keyframes horizontal {
from {left: 0;}
to {left: 100%;}
}
#keyframes vertical {
from {top: 0;}
to {top: 200px;}
}
Finally, you can omit to -moz and -ms prefixes. -webkit-animation and animation works on all the modern browsers including mobile.
See my sample of multiple animation at CodePen, i've tested it on many platforms.