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.
Related
I am building an transition with :after css and content in it using below code and Its working fine on chrome but not working on firefox 26.0. Why ?
Where i did wrong? I could not understand it ?
Help me out
<html>
<head>
<style type="text/css">
.teacherheading {
display: inline-block;
font-size:20px;
}
.teacherheading::after{content:'educational';
animation: 8s ease-out 2s pulsate;
animation-iteration-count: infinite;
-webkit-animation: 8s ease-out 2s pulsate;
-webkit-animation-iteration-count: infinite;
-moz-animation: 8s ease-out 2s pulsate;
-moz-animation-iteration-count: infinite;
-o-animation: 8s ease-out 2s pulsate;
-o-animation-iteration-count: infinite;
}
#-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-webkit-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-moz-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
#-o-keyframes pulsate {
0% {content:'educational';}
25% {content:'testprep';}
50% {content:'tutoring';}
75% {content:'training';}
100% {content:'educational';}
}
</style>
<body>
<div style="font-size:20px">
Start your <div class="teacherheading"></div> institution
</div>
</body>
</html>
The content property is not meant to be animatable.
Chrome seems to allow this (I do not know why) but Firefox is somewhat stricter.
Basically FF is following the intended behaviour, Chrome is not.
Content # MDN
From Chris Coyier at CSS-Tricks
In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.
It might be a handy trick in some distant future or it might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.
If you need to change content in a cross-browser friendly way
Use JavaScript.
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 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.
I am trying to create an animation using css the idea is that when hovered the missile falls down(check fiddle link at bottom) rotating so that it will stay almost perpendicular
the problem is that there is no continuity in the animation there are a few pauses i think my problem is here
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}
#-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}
}
http://jsfiddle.net/tuuqhgk3/2/
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
-webkit-animation-timing-function: linear;
}
This should give you a continuous animation speed, rather than the easing (pauses) that is set by default.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
Try updating your anim2 to this:
#-webkit-keyframes anim2 {
0% {margin-left: 280px; transform: rotate(220deg);}
15% {margin-top: 80px;}
100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}
}
To get smooth animation, you need to calculate exact distances (margin-top, margin-left) that need to change in each % step. I don't think you need to add too many steps in this case.
Also, if you want to repeat animation, you can add "-webkit-animation-iteration-count: infinite;" to your hover .fire/.missile (fire won't disappear, for example).
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;}
}