Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
I would like to make an animation for a popup that would slide to the left at the beginning and then disappear with the opacity after 8 seconds but I can't find how to do it.
What I have for now is
#keyframes popup-anim {
0% {
right: -100%;
opacity: 1;
}
50% {
right: 32px;
}
100% {
opacity: 0;
}
}
first your popup container should be relative then only you can make animation with respect to container
its difficult to guess on what html you are trying to fit the animation but however this should work for you
#keyframes popup-anim {
0% {
left: 0;
}
16% {
left:-32px;
opacity: 1;
}
100% {
opacity: 0;
}
}
.popup-container{
position: relative;
animation: popup-anim 8s forwards;
}
Related
I have here any animation on my page: https://tikex-dev.com
active class turn on this:
animation: btn-text-anima 1s linear infinite
If I turn it off, page laggin almost dismiss. Why is this animation so performace intensive?
.btn-text:not(.btn-video).active:after {
animation: btn-text-anima 1s linear infinite;
}
#keyframes btn-text-anima {
0% {
right: -30px;
opacity: 0;
}
60% {
right: -40px;
opacity: 1;
}
100% {
right: -45px;
opacity: 0;
}
}
Chaning the right attribute in your animation is probably the root cause of the problem. This is because the right attribute defines the position of the element, on which other positions depend, resulting in a complete redraw.
So you should use transform, which will run after the rendering in a post-processing step.
So using something like transform: translateX(-30px); instead of right: -30px should help you. How this will exactly behave will however depend on other contetn of your page, but this should give you a general idea.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Here's is link to a website http://newworldorder.com/ , whenever I load the page, I see the background zoom in for like 2 seconds, is it possible to achieve this with css? If yes, how can I do it?
Maybe something like this? Although, it resets to 1x scale at the end.
<style>
div {
background-image: url("https://images.unsplash.com/photo-1547898812-9e25c5a693e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1936&q=80");
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-position:center-top;
background-position-x: 50%;
background-position-y: 0%;
-webkit-animation: zoomin 5s 1;
}
#-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.1);
}
}
</style>
<body>
<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>
I don't know what you are really asking, but this might be what you are looking for:
html, body {
background: url("http://placehold.it/200x200") top center no-repeat;
animation: animateBg forwards 2s ease-in;
}
#keyframes animateBg{
from { background-size: 200px; }
to { background-size: 100%; }
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Can anyone help with an animation used by gatsby in their official website < https://www.gatsbyjs.com/ > in the used by logo slider section, I've tried to inspect the element and I found this ->
Also, I've tried to search on their open source git repo < https://github.com/gatsbyjs/gatsby/tree/master/www > and its huge, no success.
Seems not to be too complicated to do it manually though, Does anyone has any ideia how can I implement that animation-1qdclt7 keyframe?
Thank you!
If you look at the <ul> tag:
.css-zpz5mt {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
margin: 0;
-webkit-animation: animation-1qdclt7 60s linear infinite;
animation: animation-1qdclt7 60s linear infinite;
}
Detailed animation (animation-1qdclt7):
#keyframes animation-1qdclt7{
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Let's say I have animation that bring red square from top to the bottom - thing happens say every 5 seconds. Once the square drops to the bottom after 5 seconds, script will teleport our red square back to the top so the loop could start over again from the top. Thing is it doesn't look natural at all.
What I want to achieve is to start second loop smoothly from bottom to the top, then again from top to the bottom etc. so the movement looks natural and smooth. In other words - red square will bounce from top to the bottom every 5 seconds. Any suggestions?
I think your are looking for that.
May be it will help you.
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}
#-webkit-keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50% {
background-color: green;
bottom: 0px;
top: 200px;
}
100% {
background-color: red;
bottom: 0px;
top: 0px;
}
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
}
50% {
background-color: green;
bottom: 0px;
top: 200px;
}
100% {
background-color: red;
bottom: 0px;
top: 0px;
}
}
<div></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a img in html
I want to show 3 different img in a 4 second time lapse in css code.
PD:i found this example, but i don't understant it.
http://css3.bradshawenterprises.com/cfimg/#cfimg3
Here it is, using CSS only.
HTML:
<div id="img></div>
CSS:
#img {
width:600px;
height:400px;
border:1px solid #000;
-webkit-animation:changeBG 12s ease infinite;
-ms-animation:changeBG 12s ease infinite;
-moz-animation:changeBG 12s ease infinite;
-o-animation:changeBG 12s ease infinite;
}
#-webkit-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
#-moz-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
#-ms-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
#-o-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
And here is a FIDDLE