Hello i have some issues with my code because animation won't work here's my code:
background-image:url(industry2.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border:1px solid red;
-webkit-animation: fadein 2s ease-in ;
-moz-animation: fadein 2s ease-in ;
animation: fadein 2s ease-in ;
width:500px;
height:200px;
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
position:absolute;
top:2700px;
left:1300px;
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
you see i don't get animation working and i don't know what to do...
You had not closed the #keyframes. I have removed the left and top position for visibility purpose.
.container {
background-image: url("http://via.placeholder.com/500x200");
background-size: cover;
border: 1px solid red;
animation: fadein 2s ease-in;
width: 500px;
height: 200px;
background-repeat: no-repeat;
background-position: left top;
padding-top: 68px;
position: absolute;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">Hello</div>
Related
How do I slow down this animation and make it smoother for all browsers? Is there any possible way?
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite alternate;
}
<div id="animate-area"></div>
Simply give the animation a longer duration.
The following changes it from 10s to 30s:
#keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#animate-area {
width: 200px;
height: 200px;
background-image: url(https://github.githubassets.com/images/modules/open_graph/github-mark.png);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 30s linear infinite alternate;
}
<div id="animate-area"></div>
I’m trying to build a css only Slider with zoom effect.
The thing I’m not able to do is to difference the zoom from one slide to the other. For example I would like the first slide to have the current zoom effect but going slowly from right to left, the second from left to right and the third from top to bottom.
Any help?
Here is the Jsfiddle
<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>
You can accomplish this by setting the property background-position in your animation.
I added background-position: 0px 0px; to slideShow { 0% {} and background-position: -400px 0px; to slideShow { 100% {}.
Now the image moves slowly to the left.
* {
margin: 0;
padding: 0;
}
.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
/*animation*/
animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}
figurecaption {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
}
.pic-1 {
opacity: 1;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(https://c.slashgear.com/wp-content/uploads/2018/07/4223-SUZUKIJIMNYTHEONE-AND-ONLYSMALLLIGHTWEIGHT4WDVEHICLE-980x620.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* keyframes*/
#keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
transform:scale(1);
-ms-transformm:scale(1);
}
}
#-o-keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
-o-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-o-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
-o-transformm:scale(1);
}
}
#-moz-keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
-moz-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
-moz-transformm:scale(1);
}
}
#-webkit-keyframes slideShow {
0% {
background-position: 0px 0px;
opacity: 0;
-webkit-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
background-position: -400px 0px;
opacity: 0;
-webkit-transformm:scale(1);
}
}
<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>
JSFiddle: https://jsfiddle.net/53gpxtk1/23/
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>
Let me paste my code first
p{
width: 100px;
margin:auto;
text-align:center;
}
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 6px;
animation-name: in;
animation-duration: 1s;
/*animation-direction: reverse;*/
}
#keyframes in {
0% { background-position: -100% 6px; }
100% { background-position: 100% 6px; }
}
<p>TESTING</p>
Demo
I want the background to animate from left to right but failed to acquire that. I tried animation-direction: reverse; without any luck.
Can you guys please guide me to solve this?
Thanks
I Think Its Work Fine
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 1px;
animation-name: in;
animation-duration: 1s;
animation-direction: reverse;
}
#keyframes in {
0% { background-position: 100% 6px; }
100% { background-position: 200% 6px; }
}
p{
width: 100px;
margin:auto;
text-align:center;
}
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 1px;
animation-name: in;
animation-duration: 1s;
animation-direction: reverse;
}
#keyframes in {
0% { background-position: 100% 6px; }
100% { background-position: 200% 6px; }
}
<p>TESTING</p>
Try to apply background-position: 200% 6px; for the keyframe 100%.
p{
width: 100px;
margin:auto;
text-align:center;
}
p:hover{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAFCAYAAAAALqP0AAAALUlEQVRIie3TsREAIBDDsMD+Oz8LcGmhkCZw4zXJBLjarwPgZwaBwiBQGASKA4VqAgiKrgQoAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: -100% 1px;
animation-name: in;
animation-duration: 1s;
animation-direction: reverse;
}
#keyframes in {
0% { background-position: 100% 6px; }
100% { background-position: 200% 6px; }
}
<p>TESTING</p>
Here is the codepen demo
Im trying to insert images in slider. For now only 5 demonstrates in 1 row, but i got 7 and the rest demonstrates in second row. Looks ugly. I know that major changes probably in css , but i have no idea what i need to change.
Thank you for response.
css:
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -20%; }
45% { left: -30%; }
50% { left: -40%; }
70% { left: -50%; }
75% { left: -80%; }
95% { left: -90%; }
100% { left: -100%; }
}
body, figure {
margin: 0;
font-family:
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
sans-serif;
font-weight: 50;
font-size: 15px;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 300%;
font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 20%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.3);
color: #fff; width: 100%;
font-size: 1rem; padding: .6rem;
}
Image of Resin Toy Cars
Image of Cat Statuettes
Here's one I made earlier ;) You can ignore the transforms that was an effect for another transition. Here is a fiddle for you http://jsfiddle.net/RachGal/o6haapvt/
* {
margin: 0;
padding: 0;
}
.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
/*animation*/
animation: slideShow 42s linear infinite 0s;
-o-animation: slideShow 42s linear infinite 0s;
-moz-animation: slideShow 42s linear infinite 0s;
-webkit-animation: slideShow 42s linear infinite 0s;
}
.pic-1 {
animation-delay: 0s;
-o-animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz-animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(http://www.rachelgallen.com/images/snowdrops.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz-animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(http://rachelgallen.com/images/mountains.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz-animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(http://www.rachelgallen.com/images/purpleflowers.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-5 {
animation-delay: 24s;
-o-animation-delay: 24s;
-moz-animation-delay: 24s;
-webkit-animation-delay: 24s;
background: url(http://www.rachelgallen.com/images/yellowflowers.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-6 {
animation-delay: 30s;
-o-animation-delay: 30s;
-moz-animation-delay: 30s;
-webkit-animation-delay: 30s;
background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pic-7 {
animation-delay: 36s;
-o-animation-delay: 36s;
-moz-animation-delay: 36s;
-webkit-animation-delay: 36s;
background: url(http://www.rachelgallen.com/images/snowdrops.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
figure figcaption {
position: absolute;
bottom: 0;
text-align:center;
background: rgba(0, 0, 0, 0.3);
color: #fff;
width: 100%;
font-size: 1rem;
padding: .6rem;
}
/* keyframes*/
#keyframes slideShow {
0% {
opacity: 0.5;
transform:scale(1);
-ms-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
}
100% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
}
#-o-keyframes slideShow {
0% {
opacity: 0.5;
-o-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
}
100% {
opacity: 0;
-o-transform:scale(1);
}
}
#-moz-keyframes slideShow {
0% {
opacity: 0.5;
-moz-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transform:scale(1);
}
}
#-webkit-keyframes slideShow {
0% {
opacity: .5;
-webkit-transform:scale(1);
}
4% {
opacity: 1
}
24% {
opacity: 1;
}
28% {
opacity: 0;
}
100% {
opacity: 0;
-webkit-transform:scale(1);
}
}
<div class="pic-wrapper">
<figure class="pic-1">
<figcaption>Daisies</figcaption>
</figure>
<figure class="pic-2">
<figcaption>Snowdrops</figcaption>
</figure>
<figure class="pic-3">
<figcaption>Mountains</figcaption>
</figure>
<figure class="pic-4">
<figcaption>Purple Flowers</figcaption>
</figure>
<figure class="pic-5">
<figcaption>Yellow Flowers</figcaption>
</figure>
<figure class="pic-6">
<figcaption>Daisies Again</figcaption>
</figure>
<figure class="pic-7">
<figcaption>Snowdrops Again</figcaption>
</figure>
</div>