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
Related
I am making an HTML Application (hta) on windows. I went to make a linear gradient background transition, when I realized that gradients don't have any transitions, but I decided that I would put my mind to it and do it anyway. I had made a simple animation, but when I opened the app, it worked! I have to say IE has the transition I want for linear gradients. This is what I want my background to be:
body {
animation: animat 2s infinite linear;
}
#keyframes animat {
0% {background-image: linear-gradient(to right, lightgreen, lightblue);}
50% {background-image: linear-gradient(to right, lightblue, lightgreen);}
100% {background-image: linear-gradient(to right, lightgreen, lightblue);}
}
Anyway, that gives this cool effect in IE, where it is soothing, but you can't tell the background is necessarily moving. I would appreciate it if someone could open this page in IE and let me know how to do it without background-position. Thanks, I really appreciate it.
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 was looking at the webpage http://www.cuttherope.net on the current Google Chrome 38.0.x and saw that there are 4 icons in the middle of the page. When the mouse is over it, it has an icon squeezing effect: as if the icon is a pudding or jello squeezed on the side by a hand, and then bounce back to its natural size again.
I wonder how it is done: is it by HTML5 / CSS3, or how else is it done. I saw this div
<div class="game-icon resize"></div>
and if I use the developer tool to set display: none on it, then the icon will go away and have nothing showing, so this should be the div showing the effect, but if I examine the computed values, I do see an icon as a background, but all the computed values do not change when the mouse is over it or out of it. How is this done and is it part of HTML5 / CSS3's new features?
(if I disable JavaScript and reload the page, the effect still works, so apparently it is not done by JavaScript).
Yes, this is part of the CSS3 features (mainly transform )
If you want to have a similar effect without having to manually code it, have a look at this :
http://daneden.github.io/animate.css/
You can easily animate an element simply by adding two classes to it.
Found it! Yes, it's CSS3, and specifically the [-webkit-]animation: resize 0.2s linear; property. Disable that one and the effect stops.
I would guess it goes something like this:
img:hover {
-webkit-animation: squeeze 0.5s;
animation: squeeze 0.5s;
}
#-webkit-keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
#keyframes squeeze{
0% { transform: scale(1, 1); }
50% { transform: scale(1.1, 0.9); }
100% { transform: scale(1, 1); }
}
<img src="http://placehold.it/100x100">
The CSS the other answers have pointed out
.resize:hover {
-webkit-animation: resize 0.2s linear;
animation: resize 0.2s linear;
}
References the following keyframe animation which is elsewhere in the CSS
#-webkit-keyframes resize {
0% { -webkit-transform:scale(1, 1) }
50% { -webkit-transform:scale(1.1, 0.9) }
100% { -webkit-transform:scale(1, 1) }
}
#keyframes resize {
0% { transform:scale(1, 1) }
50% { transform:scale(1.1, 0.9) }
100% { transform:scale(1, 1) }
}
The name resize is what links the two - it's not a keyword - you could call it boing and use
animation: boing 0.2s linear;
...
#keyframes boing {
Etc.
The keyframes say
at the beginning, scale to 100% x 100%
50% through the animation, scale to 110% x 90%
at the end, scale back to 100% x 100%
And the 0.2s in the animation property tells it to take 0.2 seconds to do the entire animation. The animation starts as soon as the style is applied, in this case when you hover.
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!
So my goal is to have a pure CSS background image that just fades in and out of different images.. it works and is great, I'm just wondering if there is anyway to make the transitions quicker so I don't have to see both images eased together.. I know there are different ways of controlling how that transition happens using the timing function - I'm just wondering if there is any other way? I tried using different keyframe stop points to call the next image followed by the same image 2% later to in my mind, complete the transition quicker but it didn't seem to work.. any ideas?
http://jsfiddle.net/FE948/
<div></div>
body {
background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg') !important;}
#-webkit-keyframes slider {
25% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
48% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
50% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
73% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
75% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
97% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
99% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
}
body {
-webkit-animation-direction: normal;
-webkit-animation-duration: 27s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
}
Thanks in advance!
Use the following keyframe percentages.
#-webkit-keyframes slider {
32% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
34% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
65% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg2.jpg');}
67% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
98% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/03/headerbg3.jpg');}
100% {background-image:url('http://patheoslabs.com/valuesandcapitalism/wp-content/uploads/2014/02/headerbg.jpg');}
}
These should allow for quicker transitions.