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>
Related
I try to animate some text with html and css. For the moment, I've this :
<div id="rectangle"></div>
<p>Hello world</p>
body {
margin:0
}
#rectangle{
position: absolue;
width:100%;
height:100px;
background:#1D2024;
}
p {
margin-top: -60px;
margin-left: 30%;
border-right: solid 3px rgba(87, 203, 204,.75);
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: #57CBCC;
}
/* Animation */
p {
animation: animated-text 4s steps(29,end) 1s 1 normal both,
animated-cursor 600ms steps(29,end) infinite;
}
/* text animation */
#keyframes animated-text{
from{width: 0;}
to{width: 472px;}
}
/* cursor animations */
#keyframes animated-cursor{
from{border-right-color: rgba(87, 203, 204,.75);}
to{border-right-color: transparent;}
}
The codepen is here : https://codepen.io/aakhya/pen/EOxqOV
Why the cursor is stopping so far away after the " d " ? Someone could show me how to stopped the cursor just after the d ?
Thanks a lot
The reason the cursor is stopping so far after the letter d is because of these lines of code:
#keyframes animated-text{
from{width: 0;}
to{width: 472px;}
}
The code that says "to{width: 472px;}" means that the cursor will start 472px after it starts.
To fix this, you can edit the width so that it stops right after the d.
A potential alternative to your current animation that you might be looking for is the following:
#keyframes typing {
0% {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
If you put this into your code, along with:
animation: typing 2s steps(11), blink .5s infinite alternate;
(editing it to your needs, of course), and add a width to your p tag, it will give you the animation that accomplishes what you need once you figure out the width through experimentation.
If you want one letter to appear at a time, just make the number of steps equal to the number of characters.
Through experimentation, the width of "Hello World" in this case is about 185px, and requires 11 steps. If you want it to appear faster, you can edit the number of seconds in the animation.
p {
width: 185px;
border-right: solid 3px rgba(0,255,0,.75);
white-space: nowrap;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 28px;
color: rgba(255,255,255,.70);
}
/* Animation */
p {
animation: typing 2s steps(11), blink .5s infinite alternate;
}
/* text animation */
#keyframes typing{
0%{
width: 0
}
}
/* cursor animations */
#keyframes blink{
50% {
border-color: transparent
}
}
I'm trying to use the same animation with no selector and with selector :active. The only difference is that I change the animation-direction. The result is that the browser plays the animation once (on page load). When I click the animation is not being played.
I could create two keyframes, with the same content and different names, then it works. But I don't like copy-paste code. So I'm tying to find a way to make this work. Any suggestions?
<style>
button.click {
animation: click 0.5s 0s 1 reverse ease none;
}
button.click:active {
animation: click 0.5s 0s 1 normal ease forwards;
}
#keyframes click {
0% {
margin-left: 0px;
margin-top: 0px;
box-shadow: 5px 10px rgba(0,0,0,0.2);
}
100% {
margin-left: 2.5px;
margin-top: 5px;
box-shadow: 2.5px 5px rgba(0,0,0,0.2);
}
}
</style>
<button class="click">test</button>
You cannot restart the keyframe animation once its executed on page load, the only way is to give 2 keyframes as u said before.
I am working on an animation and I was wondering what were the rules for the #keyframe identifier.
For instance, I was doing the following but it didn't work.
Code:
#banner {
width: 468px;
height: 60px;
background-color: red;
color: white;
text-align: center;
padding-top: 30px;
font-weight: bold;
font-size: 2em;
animation-name: #banner;
animation-duration: 4s;
}
#keyframes #banner {
from: {background-color: red;}
to: {background-color: green;}
}
<div id="banner">Just a banner</div>
The #keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Note: The !important rule is ignored in a keyframe
Read more at https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
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
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; }}