Comments on: animation

By: kmkishorekumar98

kmkishorekumar98 — Sun, 21 Nov 2021 15:39:18 +0000

Is there a way to manipulate more than one class within one keyframe?

By: tangji

tangji — Sun, 21 Jun 2020 10:28:15 +0000

In reply to tangji.

ps: you can see this url: https://codepen.io/alphardex/pen/XWWWBmQ which I learn.

By: tangji

tangji — Sun, 21 Jun 2020 10:26:26 +0000

I can’t understand when I set opaticy 0 in 100% keyframes, the element will keep origin and create other element for animation.It’s my illusion？

By: Mingle

Mingle — Wed, 08 May 2019 07:58:06 +0000

How to stop moving circle coming from right or left at a particular point.

By: Luis M :D

Luis M :D — Thu, 27 Sep 2018 22:15:28 +0000

Wow, Amazing tricks, Thank you very much! Everything well explained!

By: system3x

system3x — Sat, 09 Sep 2017 15:45:47 +0000

In reply to manjit.

I dumped in the same problem, but studying the css code library I’ve easily found the solution to “stop” then animation to the last color chosen.

The code has its rules:
animation-fill-mode REQUIRES the animation-iteration-count to perform the action to allow the “stop in the end” mode.
So, here is the code to add to make it works and have fun:

animation-iteration-count: 1;
-webkit-animation-iteration-count: 1; /* Chrome and Safari /
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; / Chrome and Safari */

Code tested in Edge, Safari, Chrome and Mozilla. Maxthon works only if updated ( …or if developers update it -.-” ).

Have a nice day!

By: Eric Strickland

Eric Strickland — Thu, 03 Aug 2017 03:11:54 +0000

Hi Chris, if would can you tell me what CSS animation that is being used in this website? https://phoenix-startup.com/?ref=wg I think it’s a beautiful design!!

By: Shubham Arya

Shubham Arya — Sat, 03 Jun 2017 15:00:52 +0000

In reply to manjit.

“animation-fill-mode: forwards;”

By using this, whatever you have in “to” condition will remain there.

By: Daniel Parsons

Daniel Parsons — Fri, 28 Oct 2016 11:13:36 +0000

In reply to manjit. Another great post! Plenty of food for thought here.

By: emmanuel

emmanuel — Tue, 19 Jul 2016 12:22:59 +0000

var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];

var myName = “EMMANUEL”;
letterColors =[orange,red,blue,green,purple]
if(15 > 5) {
bubbleShape = “circle”;
}

else {
bubbleShape = “square”;
}

drawName(myName, letterColors);
bounceName()
bounceBubbles()

By: saurabh

saurabh — Sat, 19 Dec 2015 22:40:55 +0000

css animation simple trick knowledge

By: James Sherry

James Sherry — Thu, 17 Dec 2015 21:07:21 +0000

The MDN list of animatable properties seems to have disappeared. :(

By: Shikha Jaiswal

Shikha Jaiswal — Sat, 14 Nov 2015 12:10:32 +0000

Simple and important css tags for animation. Section Of Sub Properties is best one.
:)

By: Oliver Otterson

Oliver Otterson — Sun, 01 Nov 2015 18:42:25 +0000

In reply to manjit.

Hi I used CSS-Animations for a little Game:
http://mg-otterson.de/fileadmin/puzzle/index.html

Just adding elements with jQuery a class with animation, this makes it pretty easy!

By: web flash

web flash — Tue, 06 Oct 2015 07:26:41 +0000

In reply to Ben Racicot.

You are learning website based languages visit: http://webanalysttips.blogspot.in/