Goal is to keep the background red at the end of the animation.
Using chrome
http://codepen.io/JulianNorton/pen/RNqLZM
.animation {
-webkit-animation:test-animation 2s 2;
// Animation stops after a few seconds, state doesn't stay red.
}
#-webkit-keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
#keyframes test-animation {
0% {
background-color:#fff
}
100% {
background-color:red
}
}
animation-fill-mode: forwards;
is most likely what you were looking for.
Source:
CSS Animation property stays after animating
Just set the background color of your .animation element to red. Since the keyframe animation is triggered automatically, it will not appear red at first, but white like you want.
Related
I am adding an animation to my ion-item as it is added to the list.
It works but the animation transition is not smooth as it should be when using chrome on PC or an Android device.
If I use the animation on a normal div (using background-color) it works as expected with the color slowly fading from blue to white.
However when using --background which you have to for ion-item it stays blue until the end then jumps to white.
It should look like the example here:
https://css-tricks.com/using-multi-step-animations-transitions/
Any suggestions on how to get this transitioning smoothly?
I am using Ionic 5
#keyframes highlight-add {
0% {
--background: #a8d8ea;
opacity: 0.3;
}
30% {
--background: #a8d8ea;
opacity: 1;
}
100% {
--background: #fff;
}
}
.student-item-animate {
-webkit-animation: highlight-add 5s;
animation: highlight-add 5s;
}
<ion-item *ngFor="let student of studentsBooked" [ngClass]="{'student-item-animate': student.isNew}">
Also on iOS the color change is ignored completely. Just the opacity is changed.
EDIT:
git repo here:
https://github.com/madmacc/Ionic5HighlightAnimation
On loading state I have a #keyframes animation running.
#keyframes graph-line-loading {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
When I stop the animation graph__line jumps to translateY() value (set inline).
However the background-color does nicely animate.
I would expect transition property working on transform as well.
.graph__line {
transition-property: transform, background-color;
}
If the background-color is included in #keyframes animation it doesn't get transitioned on state change either.
Seems like whatever property is animated in #keyframes gets ignored by transition property even though #keyframes is added via different class.
Plz check the fiddle.
https://jsfiddle.net/LukaG/m4bzk6e3/
Any ideas?
I want to make random "blinking" effect when hovering over a doodle. For this i store animation name blink into a variable when user hovers over doodle container. For some reason animation applies only to the first element of the grid. Is there a way to apply the animation to all elements?
CodePen: https://codepen.io/entityinarray/pen/mdbRPRz
<html>
<script src="https://unpkg.com/css-doodle#0.7.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
#grid: 4/128px;
--h: ;
}
:doodle(:hover) {--h: blink;}
background: #200040;
animation-delay: rand(500ms);
animation: #var(--h) 1s infinite;
#keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>
The issue is that the use of #var(--h) is generating code like var(--h)-x which is invalid and only the first item is having the good value var(--h).
Instead of doing this you can simply consider the animation state like below. Note that rand() should be used with # and placed after the animation definition:
<html>
<script src="https://unpkg.com/css-doodle#0.7.2/css-doodle.min.js"></script>
<css-doodle>
:doodle {
#grid: 4/128px;
}
:doodle(:hover) {--h:running;}
background: #200040;
animation: blink 1s infinite;
animation-play-state:var(--h,paused);
animation-delay: #rand(500ms);
#keyframes blink {
0% {
background: #200040;
}
100% {
background: #8000c0;
}
}
</css-doodle>
</html>
I am trying to make a seamless animation so teh svg just continues to act like rain in a continous loop. The problem is the animation resets and you can tell. I would like to do this with CSS3 animations. Is the possible?
Full code is in codepen below
#sprinkles { position:absolute; height:100%; width:100%; }
#sprinkles .sprinkle { animation:rainSprinkles .85s linear infinite }
#sprinkles .sprinkle.white { fill:$white; }
#sprinkles .sprinkle.blue { fill:$blue; }
#sprinkles .sprinkle.yellow { fill:$yellow; }
#sprinkles .sprinkle.pink { fill:$hot-pink; }
#keyframes rainSprinkles {
0% {
transform: translateY(-100%);
}
100% {
visibility: hidden;
transform: translateY(1000%);
}
}
Codepen Below:
http://codepen.io/Jesders88/pen/bBYQom
The simplest way is to make your sprinkles be taller than the screen. Now when you move them down more come onto the screen.
Here's a demo.
I've made one change from your example. Instead of having four identical squares of sprinkles, I've taken just one of the four and turned it into a pattern That way the SVG repeats it for you and you can fill any area you want with a continuous pattern of sprinkles.
Then I have made a rectangle that is as wide as the screen and has a height equal to (svgHeight + patternHeight). I start it at -patternHeight off the top of the screen, then animate it down the distance of one patternHeight (487).
#rainRect {
animation: rainSprinkles 2s linear infinite;
}
#keyframes rainSprinkles {
from {
transform: translateY(0px);
}
to {
transform: translateY(487px);
}
}
We move it one patternHeight exactly so that it appears continuous when it jumps back up again to start another loop of the animation.
I want to ask, how to make the delay between animation in css? I've tried to make it but it still appears at the beginning and then the animation function.
What I want is the object / text only show after the previous animation (object 3).
Here is my code in jsfiddle: [http://jsfiddle.net/sugoi/bV6Pc/]
Thank you
Within the css animation, you can specify a delay, so you can manipulate the two animations
syntax - animation: name duration timing-function delay iteration-count direction;
You need to play with the opacity.
Let see : fork jsfiddle
.slideRight {
opacity: 0.0;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
opacity: 1;
}
<!--...-->
100% {
transform: translateX(0%);
opacity: 1;
}
}
But it seems to need some js..