I have a header with the background being animated between two images.
header {
margin-top: 80px; /* navbar height */
padding-top: 60px !important;
padding-bottom: 50px !important;
background: rgba(255,215,0,1) !important;
background-size: cover;
/*
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;*/
-webkit-animation: animation-home-background 15000ms infinite;
-moz-animation: animation-home-background 15000ms infinite;
-o-animation: animation-home-background 15000ms infinite;
animation: animation-home-background 15000ms infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
}
#-webkit-keyframes animation-home-background {
25% {background-image: url("../img/header/h2.jpg"); }
50% {background-image: url("../img/header/h1.jpg"); }
100% {background-image: url("../img/header/h2.jpg"); }
}
#keyframes animation-home-background {
25% {background-image: url("../img/header/h2.jpg"); }
50% {background-image: url("../img/header/h1.jpg"); }
100% {background-image: url("../img/header/h2.jpg"); }
}
Now the first image just appears out of the blue. How can I make sure that the first image fades in smoothly from the yellow background color?
I haven't understand exactly what you want because you have used code paths for images related to your project.
Even so, I developed a prototype in JSFiddle which replaces your images by colors and cut off all "!important".
header {
width: 100%;
height: 100px;
background: blue;
-webkit-animation: animation-home-background 15000ms infinite;
-moz-animation: animation-home-background 15000ms infinite;
-o-animation: animation-home-background 15000ms infinite;
animation: animation-home-background 15000ms infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
}
#-webkit-keyframes animation-home-background {
25% {background: red; }
50% {background: blue; }
100% {background: red; }
}
#keyframes animation-home-background {
25% {background: red; }
50% {background: blue; }
100% {background: red; }
}
https://jsfiddle.net/xj9t62a2/
Use "!Important" is a bad practice and can bring you much more complicated problems to solve.
Related
I have created a simple loader using css. Is's working fine in other browsers but its fluctuating in IE 11 / Edge.
Here I have one loader div in html:
<div class="loader"> </div>
Here is my css for loader:
body{
background:black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite; /* Safari 4+ */
-moz-animation: spin 2s linear infinite; /* Fx 5+ */
-o-animation: spin 2s linear infinite; /* Opera 12+ */
animation: spin 2s linear infinite;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
Here is fiddle:
Fiddle
Try this
body{
background:black;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
-webkit-animation: spin 2s linear infinite; /* Safari 4+ */
-moz-animation: spin 2s linear infinite; /* Fx 5+ */
-o-animation: spin 2s linear infinite; /* Opera 12+ */
-ms-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin{
0% {transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#-webkit-keyframes spin{
0% {transform:rotateZ(0deg);}
100%{transform:rotateZ(360deg);}
}
#-moz-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
#-ms-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
#-o-keyframes spin{
0% {transform:rotateZ(0deg);}
100% {transform:rotateZ(360deg);}
}
Check it on fiddle
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 want this animation will happen after every 5sec.
Here is my code
css:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */
animation: mymove 1s infinite;
-webkit-animation-delay: 1s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {-webkit-transform:rotatey(0deg);}
to {-webkit-transform:rotatey(180deg);}
}
#keyframes mymove {
from {-webkit-transform:rotatey(0deg);}
to {-webkit-transform:rotatey(180deg);}
}
HTML:
<div></div>
This should do the trick:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 7s infinite; /* Chrome, Safari, Opera */
animation: mymove 7s infinite;
-webkit-animation-delay: 1s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {-webkit-transform:rotatey(0deg);}
14.29% {-webkit-transform:rotatey(180deg);}
28.57% {-webkit-transform:rotatey(0deg);}
}
#keyframes mymove {
0% {transform:rotatey(0deg);}
14.29% {transform:rotatey(180deg);}
28.57% {transform:rotatey(0deg);}
}
Tested on Chrome and Firefox.
http://jsfiddle.net/58dex5oq/
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.
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