Okay so the background of my .featured section works perfectly how I want it to transition.
But how do I make it loop? I.E go 0%, 33%, 66%, 0% etc?
#-webkit-keyframes test{
0% {
background-image: url('../img/15.jpg');
}
33% {
background-image: url('../img/151.jpg');
}
66% {
background-image: url('../img/152.jpg');
}
}
/*Featured Content Background*/
.featured {
background-image: url('../img/15.jpg');
width: 100%;
height: 470px;
margin: auto 0px;
margin-top: -446px;
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;
-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-iteration-count: 2;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
http://jsfiddle.net/gmRyM/
ANSWER is to use the correct syntax with a default background image
#-webkit-keyframes test{
0% {
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
66% {
background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
}
}
/*Featured Content Background*/
.featured {
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;
-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}
check this out :
#-webkit-keyframes test{
0% {
background-image: url('http://www.polydevs.com/mystery/img/15.jpg');
}
33% {
background-image: url('http://www.polydevs.com/mystery/img/151.jpg');
}
100% { //Complete the loop.
background-image: url('http://www.polydevs.com/mystery/img/152.jpg');
}
}
.featured {
/*background-image: url('../img/15.jpg');*/
width: 100%;
height: 470px;
margin: auto 0px;
/*margin-top: -446px;*/
-webkit-transition: margin-top 1s;
transition-delay: margin-top 0.2s;
-webkit-animation-name: test;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; --> add this line.
}
Fiddle
While you already found the misspelt -webkit-iteration-count which has to be -webkit-animation-iteration-count, the true solution for the loop is not to specify a default image, but to actually complete the animation - it doesn't have keyframes now between 66% and 100%. Add a keyframe at 100% to actually make it loop correctly.
Fiddle sample
Related
I am trying to find the compatibility issue with Safari to no avail in a CSS glitch text animation, all keyframes are on and the animation is specified with each property, i cut the middle keyframes to make it simpler:
.glitch {
animation-name: glitch-skew;
animation-duration: 1s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.glitch::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 3px;
text-shadow: -3px 0 #ff00c1;
animation-name: glitch-anim;
animation-duration: 6s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: -3px;
text-shadow: -3px 0 #00fff9, 3px 3px #ff00c1;
animation-name: glitch-anim2;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes glitch-anim {
0% {
clip: rect(79px, 9999px, 90px, 0);
transform: skew(0.57deg);
}
5% {
clip: rect(4px, 9999px, 59px, 0);
transform: skew(0.73deg);
}
100% {
clip: rect(40px, 9999px, 94px, 0);
transform: skew(0.6deg);
}
}
#keyframes glitch-anim2 {
0% {
clip: rect(96px, 9999px, 50px, 0);
transform: skew(0.7deg);
}
5% {
clip: rect(81px, 9999px, 66px, 0);
transform: skew(0.38deg);
}
100% {
clip: rect(96px, 9999px, 10px, 0);
transform: skew(0.08deg);
}
}
#keyframes glitch-skew {
0% {
transform: skew(0deg);
}
100% {
transform: skew(0deg);
}
}
Any ideas on what could be the issue here? Or maybe there is a way to hide this animation only on safari devices? I know its a long shot
Thank you
try using the -webkit prefix for the animation elements (such as -webkit-animation-duration, -webkit-animation-name, etc.), since safari is a webkit browser, targeting the css styles to its framework should have an impact.
I needed to implement infinite bounce effect using pure CSS, so I referred this site and ended up doing this.
.animated {
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 40%, 60%, 80%, 100% {-webkit-transform: translateY(0);}
50% {-webkit-transform: translateY(-5px);}
}
#keyframes bounce {
0%, 20%, 40%, 60%, 80%, 100% {transform: translateY(0);}
50% {transform: translateY(-5px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>
Now, my only problem is the bouncing element takes a longer rest before it starts bouncing again. How can I make it bounce smoothly just like the bounce effect we get by using jQuery.animate?
The long rest in between is due to your keyframe settings. Your current keyframe rules mean that the actual bounce happens only between 40% - 60% of the animation duration (that is, between 1s - 1.5s mark of the animation). Remove those rules and maybe even reduce the animation-duration to suit your needs.
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
<hr>
Here is how your original keyframe settings would be interpreted by the browser:
At 0% (that is, at 0s or start of animation) - translate by 0px in Y axis.
At 20% (that is, at 0.5s of animation) - translate by 0px in Y axis.
At 40% (that is, at 1s of animation) - translate by 0px in Y axis.
At 50% (that is, at 1.25s of animation) - translate by 5px in Y axis. This results in a gradual upward movement.
At 60% (that is, at 1.5s of animation) - translate by 0px in Y axis. This results in a gradual downward movement.
At 80% (that is, at 2s of animation) - translate by 0px in Y axis.
At 100% (that is, at 2.5s or end of animation) - translate by 0px in Y axis.
Here is code not using the percentage in the keyframes.
Because you used percentages the animation does nothing a long time.
0% translate 0px
20% translate 0px
etc.
How does this example work:
We set an animation. This is a short hand for animation properties.
We immediately start the animation since we use from and to in the keyframes. from is = 0% and to is = 100%
We can now control how fast it will bounce by setting the animation time: animation: bounce 1s infinite alternate; the 1s is how long the animation will last.
.ball {
margin-top: 50px;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: cornflowerblue;
border: 2px solid #999;
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
#keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
from {
transform: translateY(0px);
}
to {
transform: translateY(-15px);
}
}
<div class="ball"></div>
In case you're already using the transform property for positioning your element (as I currently am), you can also animate the top margin:
.ball {
animation: bounce 1s infinite alternate;
-webkit-animation: bounce 1s infinite alternate;
}
#keyframes bounce {
from {
margin-top: 0;
}
to {
margin-top: -15px;
}
}
Please look at my code
Html :
`<div id="animated-example" class="animated swing"><div class="navbar"></div></div>`
Css :
.animated {
color: #9f9f9f;
min-height: 300px;
width: 100%;
padding-bottom: 24px;
background: #000000 url(../images/icons.svg) repeat center;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration:15s;
-moz-animation-duration:15s;
-o-animation-duration:15s;
animation-duration:15s;}
.navbar {
position: absolute;
min-height: 300px;
width: 100%;
padding-top: 24px;
background-image: -o-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: -moz-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: -ms-linear-gradient(-89deg, #000000 0%, rgba(0,0,0,0.00) 100%);
background-image: linear-gradient(-179deg, #000000 0%, rgba(0,0,0,0.00) 100%);
}
#-webkit-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#-moz-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#-o-keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
#keyframes swing {
0% {
background-position-y:511px
}
100% {
background-position-y:0
}
}
.swing {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation-name: swing;
animation-name: swing;
}
The problem is that the animation does not work in Firefox, but Chrome and other browsers work
Please see the video below, it speaks
http://sendvid.com/b1r3hofg
How about this:
.swing {
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
animation-name: swing;
}
If this doesn't work, while it could be another code issue and you probably already know this, I'll just mention some CSS properties (transitions especially) are browser-dependent (meaning they only work for certain browsers)...although what you are doing seems like it should work.
Whatever the case, I wish you good luck friend! :)
I Fixed it :
#keyframes swing {
0% {
background-position: 0 511px;
}
100% {
background-position:0
}
}
I am having a look at CSS3 keyframes and want to have a box that eases in then eases out for the specified iteration-count, this is what I have so far it eases in then disappears then eases in again.
I want the box to ease in then ease out. See my fiddle. What do I need to do to achieve this?
<div id="content">
<span class="aniamte"></span>
</div>
#keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.aniamte {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: reset, fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 5;
animation-delay: 0, 1s;
}
I believe you're looking for animation-direction:alternate, but your question is not very clear. This will make your element use the keyframes from 0% to 100% for the specified duration then go from 100% to 0% after the first iteration is complete
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-direction:alternate;
animation-iteration-count: 5;
}
Demo
Here is a small excerpt from my CSS3 animation. Works in Chrome, IE10 but not in FF.
What did i miss here?
FIDDLE
http://jsfiddle.net/3k9VJ/
HTML
<div>
<div class="pic u1"></div>
<div class="pic u2"></div>
<div class="pic u3"></div>
</div>
CSS
#-webkit-keyframes scrollem {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -2000000px;
}
}
#-moz-keyframes scrollem {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -2000000px;
}
}
#-ms-keyframes scrollem {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -2000000px;
}
}
#keyframes scrollem {
0% {
background-position-x: 0px;
}
100% {
background-position-x: -2000000px;
}
}
.pic {
width:100%;
height:400px;
position:absolute;
background-repeat: repeat-x;
background-size: cover !important;
-webkit-animation-timing-function: linear;
-webkit-animation-name: scrollem;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-moz-animation-timing-function: linear;
-moz-animation-name: scrollem;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-ms-animation-timing-function: linear;
-ms-animation-name: scrollem;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: normal;
animation-timing-function: linear;
animation-name: scrollem;
animation-iteration-count: infinite;
animation-direction: normal;
}
.u1 {
background: transparent url('http://i.telegraph.co.uk/multimedia/archive/02387/ufo_2387810b.jpg');
-webkit-animation-duration: 100000s;
-moz-animation-duration: 100000s;
-ms-animation-duration: 100000s;
animation-duration: 100000s;
}
.u2 {
top:100px;
background: transparent url('http://www.techi.com/wp-content/uploads/2012/11/UFO-4.jpg');
-webkit-animation-duration: 200000s;
-moz-animation-duration: 200000s;
-ms-animation-duration: 200000s;
animation-duration: 200000s;
}
.u3 {
top:200px;
background: transparent url('http://www.blisstree.com/wp-content/uploads/2013/07/UFO-EARTHLINGS.jpg') ;
-webkit-animation-duration: 300000s;
-moz-animation-duration: 300000s;
-ms-animation-duration: 300000s;
animation-duration: 300000s;
}
Firefox doesn't support background-position-x or background-position-y, that's why you cannot animate a single background axis on this browser.
Unfortunately, Firefox doesn't support background-position-x or background-position-y. You'll have to use the background-position shorthand instead:
#-moz-keyframes scrollem {
0% {
background-position: 0px 0px;
}
100% {
background-position: -2000000px 0px;
}
}
#keyframes scrollem {
0% {
background-position: 0px 0px;
}
100% {
background-position: -2000000px 0px;
}
}
Also, unrelated to Firefox, but you should remove all traces of the -ms- prefix from your animations because it is not used by any stable version of IE.