So I'm fiddling with animations, and I've stumpled upon a problem, after I've moved my object it return to it's initial position. Is there a way to keep it at its final position?
Some of the CSS I've got:
.spinner-word span {
font-size: 4vw;
text-transform: uppercase;
font-weight: bold;
position: relative;
animation: move .5s linear;
animation-delay: 1.5s;
}
#keyframes move {
0% {
left: -8vw;
}
100% {
left: 0px;
}
}
My fiddle
You need to add animation-fill-mode: forwards;
MDN Reference
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count
Related
So i have this css animation already for when someone enters the said page. But is there a way I can reverse the animation or call a new animation when someone leaves.
.clean {
content: url(/HPA/Clean.svg);
width: 81%;
margin-top: 39.5%;
left: 120%;
position: absolute;
animation-duration: 3s;
animation-name: s;
animation-fill-mode: forwards;
transition: ease-in ;
}
#keyframes s{
to {
width: 81%;
margin-left: -110.3%;
}
}
That is the code I have now and I'm just calling out in the HTML with a class callout.
But As stated above can I have an animation play when the person leaves the page?
I created a background with 3 images using keyframes. I first created the project just using html and css, but now I'm trying to create my project using NextJS.
In the html/css version, this transition is working fine, but in NextJS the 3th image won't show, I get a white screen, the fist two however work fine.
Can anybody help me with this please? Please find added my code:
.mainheader {
height: 100vh;
position: relative;
color: #fff;
animation: animate ease-in-out 10s infinite;
background-size: cover;
}
#keyframes animate {
0%,
100% {
background-image: url(../assets/afbeeldingen/bg-3.jpg)
url(../assets/afbeeldingen/bg-1.jpg);
}
33% {
background-image: url(../assets/afbeeldingen/bg-1.jpg),
url(../assets/afbeeldingen/bg-2.jpg);
}
66% {
background-image: url(../assets/afbeeldingen/bg-2.jpg),
url(../assets/afbeeldingen/bg-3.jpg);
}
}
First, I dont know if this applies to your case since you didnt provide a link or snippet to your problem code. I was experiencing the same problems with a slideshow css animation.
#slideset1 > * {
position: absolute;
height: 10rem;
top: 0;
left: -22.5rem;
animation: 12s autoplay1 infinite ease-in-out;
}
The HTML/CSS code works on codepen, but when transferred to nextjs environment it just didnt animate. After trying various suggestions, what resolved it was this from Alex Galays. To not use the shorthand for the animation property but to specify each animation property that you use separately.
#slideset2 > * {
position: absolute;
height: 10rem;
top: 25rem;
left: 0;
animation-duration: 12s;
animation-name: autoplay2;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
You can see it working here on codesandbox
Cant/didnt test with your case, but you can apply it to your own code.
I have a very simple animation setup, to show a loading three dots. I got a bunch of them from around and picked the simplest looking one. The problem I have with it, is that it starts from 0 like it's told to. I need it to start from the end.
CSS:
.loading {
font-size: 30px;
}
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
/* animation: ellipsis-dot steps(40, start) 9000ms infinite; */
animation: ellipsis-dot 1s infinite;
animation-fill-mode: fowards;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0em;
}
#keyframes ellipsis {
to { width: 1.25em; }
}
Here's a fiddle.
I have these showing in a table with 100s of them showing together. Which all start from completely empty. I need them to start from 3 dots. Then go to 0 then do what it's doing right now.
Note: the duration 9000 is actually 900. It's slowed down to emphasize the start of the animation after I run the fiddle.
.loading {
font-size: 30px;
}
.loading:after {
content: "...";
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis-dot 1s infinite .3s;
animation-fill-mode: forwards;
width: 1.25em;
}
#keyframes ellipsis-dot {
25% {
content: "";
}
50% {
content: ".";
}
75% {
content: "..";
}
100% {
content: "...";
}
}
<div class="loading">Loading</div>
.loading {
font-size: 30px;
}
.loading:after {
content: "\2026";
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis-dot 1s infinite;
animation-fill-mode: fowards;
width: 1.25em;
}
#keyframes ellipsis-dot {
50% {
width: 0em;
}
100% {
width: 1.25em;
}
}
<div class="loading">Loading</div>
I'm seeing some common problems in your CSS, and I'll point them here to be more specific:
Your animation-fill-mode rule provides a invalid value. You need to correct it to forwards instead of "fowards".
The animation name differs from the animation name stated on your #keyframes rule. You'll need to correct that as well by changing one of those.
Suggestion: In order to maintain complete track of your animation, I suggest you to define the beginning point as well. Specifying both from and to in your #keyframes rule will save you some time, should you need to change it later.
Reference: Animation - CSS at MDN
That aside, you can apply animation-direction: reverse to your element's CSS. It will reverse the defined animation, and make it run backwards.
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 1s infinite; /* Your previous rule */
animation: ellipsis 1s infinite reverse; /* You can reverse it like this */
animation-direction: reverse; /* Or like this */
content: "\2026";
width: 0em;
}
I've updated your JSFiddle using alternate-reverse, which feels cool.
I have two animations: on element load and hover:
div {
animation: slide-up 2s;
-webkit-animation: slide-up 2s;
-moz-animation: slide-up 2s;
}
div:hover{
animation: rotate 2s;
-webkit-animation: rotate 2s;
-moz-animation: rotate 2s;
}
The slide-up animation runs once the element is loaded, and rotate runs when element is hovered. However, now the element slides up on mouse leave and I don't know how to prevent this. So I'd like to turn off slide-up animation on hover.
The rotate animation uses transform property, and slide-up just changes margins.
Reason:
The slide-up animation executes once again when you move the mouse out of the element because of the following reasons:
On load, the element has only one animation (which is slide-up). The browser executes this.
On hover, the animation property again specifies only one animation (which is rotate). This makes the browser remove the slide-up animation from the element. Removing the animation makes the browser also forget about the execution state or the execution count of it.
On hover out, the default div selector becomes applicable for the element and so the browser again removes the rotate animation and attaches the slide-up animation. Since it is being re-attached, the browser thinks it must execute it again.
Solution:
You can make the slide-up animation run only once by making sure that the animation is actually never removed from the element even when :hover is on and animation-iteration-count is 1.
In the below snippet, you'd note how I have retained the slide-up animation definition within :hover selector also. This makes the browser see this animation as ever present and since this animation is already executed once on load, it won't execute it again (because of iteration count).
(Note: Just to avoid any confusions - the default value for animation-iteration-count is 1 but I had made it explicit for the purpose of explanation. It is not the primary reason but is just an extra step to make sure that its value doesn't mess up the solution.)
div {
height: 100px;
width: 100px;
border: 1px solid;
animation: slide-up 2s 1;
}
div:hover {
animation: slide-up 2s 1, rotate 2s forwards;
}
#keyframes slide-up {
from {
margin-top: 100px;
}
to {
margin-top: 0px;
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(60deg);
}
<div>Some div</div>
just add an animation-play-state: paused;
div:hover{
animation: rotate 2s, slide-up paused;
-webkit-animation: rotate 2s, slide-up paused;
-moz-animation: rotate 2s, slide-up paused;
}
Just add another animation after a comma. For example, if I want to create a box that will fade in(1st animation) and then its shadow size keeps on changing(2nd animation), then this is the CSS that I am gonna use:
#box{
width: 300px;
height: 250px;
border: 2px solid white;
border-radius: 20px;
display: block;
margin-left: 500px;
margin-top: 190px;
background-color: rgb(0, 204, 228);
animation: animate1 3s 1, animate2 1s infinite;
text-align: center;}
#keyframes animate1{
0% {
opacity: 0;
}
100%{
opacity: 1;
}
}
#keyframes animate2{
0%{box-shadow: 0px 0px 10px 0px gray; }
50%{box-shadow: 0px 0px 30px 0px gray; }
100%{box-shadow: 0px 0px 10px 0px gray; }}
So I made a CSS animation with keyframe where the background color of the element and the font color changes. The problem is, when it comes to the last frame, the colors get reset to the default ones. I used the animation-fill-mode and it helps to maintain the end size but the colors still reset? This is the code:
#keyframes anim{
0% {background-color: #404880; color: #DCE0F7;}
90% {background-color: #747AA6; color: #242D5E;}
100% {font-size: 19px;}
}
.apply{
font-size: 15px;
background-color: #404880;
border-radius: 5px;
border-style: none;
color: #DCE0F7;
}
.apply:hover{
animation: anim;
animation-duration: .5s;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation-fill-mode:forwards; /*IE 10+*/
animation-fill-mode:forwards; /*when the spec is finished*/
}
When you set animation-fill-mode: forwards, the state as at the last keyframe would be retained for the element even after the animation is complete. Here, you've not set value for either background-color or color in last keyframe (which is, the 100% frame) and so it goes back to the original value that was provided for the element (the default or un-hovered state). If you want it to retain the state as at 90% frame then the properties and its values should be carried over to the 100% frame also (even though there is no change).
For exactly the same reason that is mentioned above, you don't require the 0% frame in your settings because it has the same value as the default state of the element. The 0% frame is generally required only when the state at the start of the animation needs to be different from the default state.
#keyframes anim {
90% {
background-color: #747AA6;
color: #242D5E;
}
100% {
font-size: 19px;
background-color: #747AA6;
color: #242D5E;
}
}
.apply {
font-size: 15px;
background-color: #404880;
border-radius: 5px;
border-style: none;
color: #DCE0F7;
}
.apply:hover {
animation: anim;
animation-duration: .5s;
animation-fill-mode: forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='apply'>Test content</div>