This is the css that i have,
div {
background-image: url(some url);
width:100px;
height:100px;
background-size:cover;
}
.animate {
animation:changeSize 3s 1;
}
#keyframes changeSize {
0% {transform: scale(1);}
65% {transform: scale(1.2);}
100% {transform: scale(1.4);}
}
And with Jquery while clicking on a button i am just toggling the class animate to the div. But it seems not working. I am new to css3 animations and i dont know how to debug this. Any clues would be helpful for me in this context.
DEMO
Hi its working fine only on firefox and you has to add vendor prefix for webkit browser
#-webkit-keyframes
here it is
#keyframes changeSize {
0% {transform: scale(1);}
65% {transform: scale(1.2);}
100% {transform: scale(1.4);}
}
#-webkit-keyframes changeSize {
0% {transform: scale(1);}
65% {transform: scale(1.2);}
100% {transform: scale(1.4);}
}
check the fiddle
Fiddle
and add transition to the div you needed.
You may play with css3 animation fill property
.animate {
animation:changeSize 3s 1 forwards;
}
please find jsfiddle link http://jsfiddle.net/FLG4D/16/
here I have played with "backanimate" class as well so toggle back will be smooth as well
similar question Can't stop css animation disappearing after last key frame
Hope it helps!
Related
I've been looking further into animation lately, and wanted to animate a text that transitions from one word, to another word, to another word, etc. and while the code im using does do what its supposed to, there's a frame in between where you see the text changing. Does anyone know how to fix this?
Attempted adding more keyframes making it more like a steplike code, but this didn't seem to work.
HTML (where the text changes):
<h2 class="subtitle">I am feeling <b class="moods"></b></h2>
CSS
.moods:before {
content: 'sad';
animation-name: head;
animation-duration: 30s;
animation-iteration-count: infinite;
}
#keyframes head {
0% {opacity:0;}
5% {opacity:1; content: "sad"; }
10% {opacity:0;}
15% {opacity:1; content: "happy"; }
20% {opacity:0; }
25% {opacity:1; content: "joyfull"}
30% {opacity:0;}
35% {opacity:1; content: "mad"}
40% {opacity:0; }
45% {opacity:1; content: "depressed"}
50% {opacity:0; }
55% {opacity:1; content: "angry"}
60% {opacity:0; }
65% {opacity:1; content: "twitchy"}
70% {opacity:0; }
75% {opacity:1; content: "sick"}
80% {opacity:0; }
85% {opacity:1; content: "healthy"}
90% {opacity:0; }
95% {opacity:1; content: "energetic"}
100% {opacity:0;}
}
I like the way it's working already, I'd just like it to be a smooth transition without seeing the word change when it changes the content of the class.
We can make things a little more interesting by chaining our transitions together using commas, then playing with the duration and delay of them to create the same sort of multi-step movement effect that is possible in keyframe animation.
I have a keyframe animation within my site; it is extremely basic but it seems to be running a little 'glitchy'.
I appreciate that this could be due to many factors but as I do not have extensive experience with CSS Keyframes, I was hoping someone would be willing to look at my code and ascertain whether I am doing it correctly?
Here is my code:
div {display:block;position:absolute;left:0;bottom:20px;right:0;text-align:center;z-index:2;}
a {display:inline-block;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:2px;color:#000;text-decoration:none;text-transform:uppercase;}
a:after {content:'\f107';display:block;font-family:FontAwesome;font-size:30px;margin:5px auto 0;animation:bounce 2s infinite;}
/* Scroll down bounce */
#keyframes bounce {
0%, 20%, 80%, 100% {transform: translateY(0);}
50% {transform: translateY(-10px);}
}
<div>
<a>Scroll Down</a>
</div>
Bonus
Ideally I would actually like the animation to bounce in order to stand out more but I failed to get this to to work. If anyone can see a way to amend this to apply a more 'bounce' effect I would very much appreciate it...
It depends on what you mean by bounce. You could add a couple more keyframe animations to make it seem like its bouncing a little when it hits the bottom:
JS Fiddle
#keyframes bounce {
0%, 70%, 100% {
transform: translateY(0);
}
50%, 85% {
transform: translateY(-10px);
}
}
Its just because the animation-duration is too high 2s and the transform distance is low, either lower the duration or increase the transformY - demo
Also you can make the animation feel like bouncing by adjusting the transform values at different keyframes, just for example -
#keyframes bounce {
50% {transform: translateY(0);}
0%, 25%, 75%, 100% {transform: translateY(-10px);}
}
Fiddle Demo
I'm trying to create a slide up/down or right/left animation, but I couldn't get it to work. How to hide the first div after some time with a sliding effect? how to play with display in animation
some help will be apreciated, this what I'm doing
<div id="div1">Fist div</div>
<div id="div2">Second div </div>
#div1{
animation: slideup 7s;
-moz-animation: slideup 7s;
-webkit-animation: slideup 7s;
-o-animation: slideup 7s;
}
#div2
{
position:relative;
}
#keyframes slideup
{
0% {top:0px;}
75% {top:0px;}
100% {top:-20px;}
}
#-moz-keyframes slideup
{
0% {top:0px;}
75% {top:0px;}
100% {top:-20px;}
}
#-webkit-keyframes slideup
{
0% {top:0px;}
75% {top:0px;}
100% {top:-20px;}
}
#-o-keyframes slideup
{
0% {top:0px;}
75% {top:0px;}
100% {top:-20px;}
}
No way to do this just with CSS and HTML. However it is possible to do with JavaScript. With JavaScript you can detect when the animation has ended using an Event Listener. Then you can remove or hide the div you want.
var div = document.getElementById("div1");
//add the event listener
div.addEventListener("animationend", function(event){
document.getElementById("div2").style.display = "none";
});
//you will need to explicitly add the class that contains the animation
div.classList.addClass("animate");
Change your CSS to be declared on the class .animate instead of on #div1. Also, be aware of browser prefixes. For more detail refer to this link.
I have a slideshow made with css3 animation like this:
#-keyframes animBanner
{
0% {top: 0px;}
18% {top: 0px;}
20% {top: -60px;}
38% {top: -60px;}
40% {top: -120px;}
58% {top: -120px;}
60% {top: -180px;}
78% {top: -180px;}
80% {top: -240px;}
98% {top: -240px;}
100% {top: 0px;}
}
I want to add controls to it, so you can go to the pic you want.
I can trigger transition events with a simple javascript like this:
var p=document.getElementById('elemId');
p.style.left= '50%';
but it doesn't work with animation. Is it possible to make this work or should I use jquery for the animation?
Shmiddty was right.
I changed the classes using this code:
//Stop animation
var ad = document.getElementById('animBannerId');
ad.className="paused";
//Move the slide to the desired pic
anuncio.style.top = '160px';
//Etc.
And my css has this code for the transitions:
.paused
{
position: relative;
transition:top 1s;
-o-transition:top 1s;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}
You, guys, are great. Thank you very much.
By the way, I haven't added a code for restarting the animation, but it can be done making a timer
I'm trying to create a graceful transition between the images within my photo gallery without using ":hover" or an once of Javascript. (I'm still open minded to HTML5)
The animation, this slideshow, should begin on page load, no user interaction needed. However my CSS isn't properly timed. Ideally, every 6 seconds, the current image begins to fade out just as the next image begins to fade in. The animation should loop infinitely after the last image.
I'm using a delay between the images in an attempt to stagger the animations, but the images overlap each other far too much. I seem to have misunderstood a number of things. My Css is below:
#imgContainer {
height: 205px;
position: relative;
width: 300px;
}
#imgContainer img {
-moz-animation-duration: 12s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: FadeInOut;
-moz-animation-timing-function: ease-in-out;
left: 0;
position: absolute;
}
#imgContainer img:nth-of-type(1) {
-moz-animation-delay: 0s;
}
#imgContainer img:nth-of-type(2) {
-moz-animation-delay: 6s;
}
#imgContainer img:nth-of-type(3) {
-moz-animation-delay: 12s;
}
#-moz-keyframes FadeInOut {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
I'm really new to css3, so any kind of assistance would be greatly appreciated.
Success!
I discovered if I apply an animation to each of my images within the slideshow, rather than being delayed, I could achieve the effect I desired. Basically the animations would run sequentially in an infinite loop, and rather than use a single keyframe, each has their own.
I wanted the slideshow to progress at 15s intervals. So to accomplish this I set the duration of the entire animation to 45s. The keyframes gradually adjust the opacity of the images based on the current time or frame within the animation. This is indicated by the "%." For example, from 2% to 32% of 45s, the keyframe for the first image will be 100% opaque. Between 32% and 34%, the first image will begin the transition from being opaque to completely transparent.
The difference between (34% of 45s) - (32% of 45s) equals the length of time to complete the transition. Increase this difference for a longer transition.
The keyframe for the second image does the same only its' transition doesn't begin until it reaches 33% of the 45s animation. (I chose to overlap them slightly for visual appeal). Again, I use the difference between 33% and 35% to keep the transition time short, rather than 0% and 35% which would've produced a much longer transition.
The third keyframe follows the same scheme for its image.
As you implement this, don't forget to change / add the appropriate vendor prefix for your browser and browser of your web audience.
/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */
I hope this is helpful to anyone else who may be trying to do the same. If you like what you've read, please feel free to let me know as you vote using the up-arrow.
Thanks.
=)
#imgContainer img{
position:absolute;
left:0;
}
#image0 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
#image1 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
#image2 {
-moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}
#-moz-keyframes myKeyFrameName0 {
0% {opacity: 0;}
2% {opacity: 1;}
32% {opacity: 1;}
34% {opacity: 0;}
100% {opacity: 0;}
}
#-moz-keyframes myKeyFrameNamee1 {
0% {opacity: 0;}
33% {opacity: 0;}
35% {opacity: 1;}
65% {opacity: 1;}
67% {opacity: 0;}
100% {opacity: 0;}
}
#-moz-keyframes myKeyFrameName2 {
0% {opacity: 0;}
66% {opacity: 0;}
68% {opacity: 1;}
98% {opacity: 1;}
100% {opacity: 0;}
}