hy guys this is a simple css background animation script everything is working fine but now i want to Set this background in 50% of the width of the window i tried a several way but i am not able to do this and now i am totally frustrated ... any kind of suggestion will help in my project thnx in advance.
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
<body>
<h1>Pure CSS3 Animated Gradient Background</h1>
</body>
</head>
Added an extra div with css properties
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
to achieve 50% width and 100% height.
body {
width: 100wh;
height: 90vh;
color: #fff;;
}
.width-50 {
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
<body>
<div class="width-50">
<h1>Pure CSS3 Animated Gradient Background</h1>
</div>
</body>
I am trying to make a sailing ship animation. It works, but it is not a smooth animation. It stops in each change I make in the #keyframes. I'm using transform:rotate(-5deg) and then it changes to 5deg to simulate the waves effect, at the same time I make it moves changing the "left" values, but and the result is awful. What piece of css code am I missing to have my animation running soft and smoothly?
Here is code:
div {
width: 150px;
height: 150px;
top: 20px;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');
position: relative;
background-size: cover;
animation: mymove 5s linear infinite alternate;
transform: rotate(0deg);
transform:translate3d
transition: all;
}
#-webkit-keyframes mymove {
from,
20% {
trans: -2%;
transform: rotate(5deg)
}
20%,
30% {
left: 20%;
transform: rotate(-5deg)
}
40%,
50% {
left: 40%;
transform: rotate(5deg)
}
60%,
70% {
left: 60%;
transform: rotate(-5deg)
}
80%,
90% {
left: 80%;
transform: rotate(5deg)
}
90%,
100% {
left: 100%;
transform: rotate(-5deg)
}
}
When you add 2 percent values like 20%, 30% { ... }, 40%, 50% { ... }, etc., the rules applied will be the same between those 2 steps/values, hence it stops for a few milliseconds.
If to remove 1 of the percent values, and you can also remove the left from all but the first and last, you get a smooth animation
div {
width: 150px;
height: 150px;
top: 20px;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');
position: relative;
background-size: cover;
animation: mymove 5s linear infinite alternate;
transform: rotate(0deg);
transform:translate3d
transition: all;
}
#-webkit-keyframes mymove {
from,
0% {
left: -150px;
transform: rotate(5deg)
}
20% {
transform: rotate(-5deg)
}
40% {
transform: rotate(5deg)
}
60% {
transform: rotate(-5deg)
}
80% {
transform: rotate(5deg)
}
100% {
left: 100%;
transform: rotate(-5deg)
}
}
<div></div>
If to use the same syntax as in your original CSS, one can combine the rules that has the same property/value, like this.
div {
width: 150px;
height: 150px;
top: 20px;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/c2/bb/ae/c2bbaed0207deef5775af9c01e1b31ba.jpg');
position: relative;
background-size: cover;
animation: mymove 5s linear infinite alternate;
transform: rotate(0deg);
transform:translate3d
transition: all;
}
#-webkit-keyframes mymove {
from,
0% {
left: -150px;
}
20%, 60%, 100% {
transform: rotate(-5deg)
}
0%, 40%, 80% {
transform: rotate(5deg)
}
100% {
left: 100%;
}
}
<div></div>
Background image animation not working in Firefox and I don't want the background repeat image in animation.
Here is url: http://trekoholic.com/site/
body {
background:url(../img/bg.jpg);
-webkit-animation: slide 30s linear infinite;
}
#-webkit-keyframes slide {
0%{ background-position: left 20%; }
25%{ background-position: 100px 0; }
50%{ background-position: 200px 0; }
100%{ background-position: 300px 0; }
}
#-moz-keyframes slide {
0%{ background-position: left 20%; }
25%{ background-position: 100px 0; }
50%{ background-position: 200px 0; }
100%{ background-position: 300px 0; }
}
Just add one line:
body{
background:url(../img/bg.jpg);
-webkit-animation: slide 30s linear infinite;
animation: slide 30s linear infinite;
}
At this link: [http://codepen.io/FelixKiunke/pen/nvDcj][1] you can see that this guy made a nice circle that finishing filling its edges up every 10 seconds. This is what I want to duplicate.
I have copied the compiled CSS as well as the HTML from this page and put it in some local files. When I open my page with this on it, Chrome tells me that the background CSS elements have invalid syntax and so the circle does not show up at all.
Why is the syntax invalid in my copied code but not on the site?
/*
NOTE ABOUT THE FORK:
This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
Most of the code is unchanged, too make my changes clear I have removed the previous comments.
I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
*/
* {
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
background: white;
/*The bigger size at click:*/
transition: width 0.5s, height 0.5s;
}
.wrapper.big {
width: 400px;
height: 400px;
}
.pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
/*
Here comes the radial gradient.
Note that it has to have the alignment "left center" for the .filler,
and "right center" for the .spinner!
*/
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(left center, circle, #00ccff 0px, #000088 100%);
/* The borders mustn't be transparent, that looks really ugly! */
border: 20px solid #024;
}
.spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(right center, circle, #00ccff 0px, #000088 100%);
border-right: none;
animation: rota 10s linear infinite;
}
.spinner::after {
position: absolute;
height: 20px;
top: 0px;
right: 0px;
content: "Click me!";
transform: rotate(270deg);
transform-origin: 100% 100%;
color: white;
font: 16px/20px sans-serif;
}
.wrapper:hover .pie {
border-color: #620;
}
.wrapper:hover .filler {
/*CHROME SAYS THE NEXT LINE IS INVALID*/
background: radial-gradient(left center, circle, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
background: radial-gradient(right center, circle, #ffbb11 0px, #dd6600 100%);
}
.filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: fill 10s steps(1, end) infinite;
border-left: none;
}
.mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: mask 10s steps(1, end) infinite;
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
Update
Here is the updated (and working) CSS:
/Spinner/
/*
NOTE ABOUT THE FORK:
This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
Most of the code is unchanged, too make my changes clear I have removed the previous comments.
I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
*/
* {
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
margin: 10px auto;
position: relative;
background: white;
/*The bigger size at click:*/
transition: width 0.5s, height 0.5s;
}
.wrapper.big {
width: 400px;
height: 400px;
}
.pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
/*
Here comes the radial gradient.
Note that it has to have the alignment "left center" for the .filler,
and "right center" for the .spinner!
*/
background: -webkit-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -webkit-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -moz-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -ms-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: -o-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
background: radial-gradient(circle at left center, #00ccff 0px, #000088 100%);
/* The borders mustn't be transparent, that looks really ugly! */
border: 20px solid #024;
}
.spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
background: -webkit-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -webkit-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -moz-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -ms-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: -o-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
background: radial-gradient(circle at right center, #00ccff 0px, #000088 100%);
border-right: none;
-webkit-animation: rota 10s linear infinite;
-moz-animation: rota 10s linear infinite;
-o-animation: rota 10s linear infinite;
animation: rota 10s linear infinite;
}
.spinner::after {
position: absolute;
height: 20px;
top: 0px;
right: 0px;
content: "Click me!";
transform: rotate(270deg);
transform-origin: 100% 100%;
color: white;
font: 16px/20px sans-serif;
}
.wrapper:hover .pie {
border-color: #620;
}
.wrapper:hover .filler {
background: -webkit-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -webkit-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -moz-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -ms-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: -o-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
background: radial-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
background: -webkit-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -webkit-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -moz-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -ms-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: -o-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
background: radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
}
.filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
-webkit-animation: fill 10s steps(1, end) infinite;
-moz-animation: fill 10s steps(1, end) infinite;
-o-animation: fill 10s steps(1, end) infinite;
animation: fill 10s steps(1, end) infinite;
border-left: none;
}
.mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
-webkit-animation: mask 10s steps(1, end) infinite;
-moz-animation: mask 10s steps(1, end) infinite;
-o-animation: mask 10s steps(1, end) infinite;
animation: mask 10s steps(1, end) infinite;
}
#-webkit-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-moz-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-o-keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#-moz-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#-o-keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#keyframes mask {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
#-webkit-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
#-moz-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
#-o-keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
#keyframes fill {
0% {
opacity: 0;
}
50%, 100% {
opacity: 1;
}
}
[1]: http://codepen.io/FelixKiunke/pen/nvDcj
The syntax indeed is incorrect. It should be radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%). This is also incorrect in the CodePen, and once you fix it, the animation looks different (it has a 'Click here' call-to-action when you hover it). It is not the core issue, though.
The reason why the animation doesn't work at all in your version, is because the animation properties need a -webkit- prefix in Chrome.
In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties.
CodePen can also use Autoprefixer (another such library) or neither. Once you select 'neither', you'll see that the CodePen example also doesn't work anymore, because the (S)CSS doesn't contain the required prefixed version for the CSS attributes.
So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).
i want to use this code , but i want animation goes vertical.
header {
width: 100%;
height: 150px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
background-position: 0px;
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 100px; } /* set this to the width of the image */
}
i found this code here : http://jsfiddle.net/e3WLD/3/
thanks for help
The background-position accepts 2 parameters :
the first one for horizontal positioning
and the second one for vertical positioning
More info on background-position on W3schools
So by adding a second parameter to the background-position property you can
animate your background vertically.
I edited your JSFiddle
To this:
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px;
background-repeat: repeat-y;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-moz-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
#-o-keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 1000px; } /* set this to the width of the image */
}
#keyframes myanim {
0% { background-position: 0px; }
100% { background-position: 0px 1000px; } /* set this to the width of the image */
}
I am able to do vertical by transforming the element 90 degrees.
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
Working Fiddle
You are only setting and animating one of the background position values so it assumes that are referreing to the first one (x-position) and the other defaults to auto (I think).
Try this
**JSFiddle Demo**
CSS
header {
width: 100%;
height: 131px;
background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png);
background-position: 0px 0px; /* note */
background-repeat: repeat-x;
-webkit-animation: myanim 5s infinite linear;
-moz-animation: myanim 5s infinite linear;
-o-animation: myanim 5s infinite linear;
animation: myanim 5s infinite linear;
}
#-webkit-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 1000px; }
}
#-moz-keyframes myanim
{ 0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#-o-keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 100px; }
}
If you want to set it to vertically rotate like this: http://jsfiddle.net/jme11/AYKC2/
Then you need to set the repeat to repeat-y and change the background position to match the element's height:
#keyframes myanim {
0% { background-position: 0px 0px; }
100% { background-position: 0px 131px; } /* set this to the height of the image */
}