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>
Related
I'm trying to make an expanding circle animation from top left corner of the screen to the entire screen.
I got it working as expected but from page center:
#keyframes anim {
0% { clip-path: circle(0% at 50% 50%); }
100% { clip-path: circle(150%); }
}
#backdrop {
background-color: #1B1B1B;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: scroll;
z-index: 10;
animation-name: anim;
animation-duration: 1s;
animation-iteration-count: 1;
}
<div id="backdrop"></div>
Please change your keyframes as below. You are starting your circle from 50% 50% which is center of the page.
0% {
clip-path: circle(0% at 0% 0%);
}
.full {
width: 100vw;
height: 150px;
background: red;
animation-name: anim;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#keyframes anim {
0% {clip-path: circle(0% at 150% 0%);}
100% {clip-path: circle(150%);}
}
<div class="full"></div>
I try to animate a sprite with auto fullscreen size
but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing)
any idea to autosize sprite ?
#-moz-keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#-webkit-keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#keyframes play {
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
#loader
{
position: fixed;
z-index: 999999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
-webkit-animation: play 2s infinite steps(11);
-moz-animation: play 2s infinite steps(11);
-o-animation: play 2s infinite steps(11);
animation: play 2s infinite steps(11);
}
<div id="loader"></div>
You're almost there!
There should be steps(10) as the start position is not a step actually.
BTW, z-index: 999999999999 looks paranoid to me =)).
#keyframes play {
100% {
background-position: 100%;
}
}
#loader
{
position: absolute;
z-index: 9;
top: 0; right:0;
bottom:0; left: 0;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
animation: play 1s infinite steps(10);
}
<div id="loader"></div>
Update
Question bonus:
#keyframes play {
99.99% {
background-position: 120%;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
}
100% {
background-image: none;
z-index: -1;
}
}
#loader {
position: fixed;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: 0 0;
background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
background-size: 1100% 100%;
background-repeat: no-repeat;
animation: play 2s steps(12) forwards;
}
body {
background: url(https://picsum.photos/640/480) 50% 50% /cover
<div id="loader"></div>
how to make use of gradient animation effects like this in react component in-line. I have to make use of below CSS based gradient animation effects as inline in react component. Is there any specific package(s) available for that?
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;
}
Take a look at this:
https://codepen.io/anon/pen/BYvVqP
I just used a state to store the classes.
className={this.state.animationClass}
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>
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 */
}