css animation

Solutions on MaxInterview for css animation by the best coders in the world

showing results for - "css animation"

27 Jan 2018

1<style>
2@keyframes animatename{
3  0%{
4    transform: translateY(3px);
5  }
6  100%{
7    transform: translateY(-3px);
8  }
9}
10.my-div{
11  animation: animatename 1s linear infinite;
12  /* animation shorthand */
13  animation: animation-name animation-duration animation-direction animation-iteration-count
14}
15</style>

source

Aitana

28 Aug 2019

1<style>
2.my-element {
3  width: 100%;
4  height: 100%;
5  animation: tween-color 5s infinite;
6}
7
8@keyframes tween-color {
9  0% {
10    background-color: red;
11  }
12  50% {
13    background-color: green;
14  }
15  100% {
16    background-color: red;
17  }
18}
19
20html,
21body {
22  height: 100%;
23}
24<style>
25
26<body>
27	<div class="my-element"></div>
28</body>

Erica

27 May 2019

1CSS animation properties template:
2{
3   animation-name: anima-name;
4    animation-duration: 1s;
5    animation-iteration-count: infinite;
6    animation-delay: 2s;
7    animation-direction: reverse | normal | alternate | alternate-reverse ; 
8  animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)); 
9  animation-fill-mode:forwards | backwards | both | none;
10}
11@keyframes anima-name {
12  from {
13   background-position:right;
14  }
15  to {
16    background-position:left;
17  }
18}
19@keyframes anima-name {
20  0% {
21    background-color: red;
22  }
23  50% {
24    background-color: green;
25  }
26  100% {
27    background-color: red;
28  }
29}
30

Lia

19 May 2019

1# css animaition .................... infinite dont stop
2
3  animation-name: example;
4  animation-duration: 1s;
5  animation-iteration-count: infinite;
6
7@keyframes example {
8  0%{transform: rotate(0deg)}
9  50% {transform: rotate(5deg)}
10  75%{transform: rotate(0deg)}
11  100% {transform: rotate(50deg)}
12}
13
14

Sophia

01 May 2020

1div{
2	animation: name duration timing-function delay iteration-count 
3  		direction fill-mode;
4}
5
6/* 
7name: name of the animation
8duration: amount of time it takes ex: 2s
9timing-function: ex: linear, ease, etc.
10delay: amount of time to delay from it starting
11iteration-count: how many times to play the animation, ex: initial
12direction: ex: forwards, backwards, alternate, alternate-reverse
13fill-mode: ex: none, forwards, backwards, both
14*/

Alana

16 Jan 2016

1div:hover {
2  background-color: #000;
3  transition: background-color 400ms;
4}

Iban

11 Apr 2016

1Read this helpful, short and straightforward article to learn CSS animation perfectly.
2
3https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd

Pia

22 Aug 2016

1<!DOCTYPE html>
2<html lang="en">
3   <head>
4      <title>CSS Animation</title>
5
6      <style>
7         .element {
8            height: 250px;
9            width: 250px;
10            margin: 0 auto;
11            background-color: red;
12            animation-name: stretch;
13            animation-duration: 1.5s;
14            animation-timing-function: ease-out;
15            animation-delay: 0;
16            animation-direction: alternate;
17            animation-iteration-count: infinite;
18            animation-fill-mode: none;
19            animation-play-state: running;
20         }
21
22         @keyframes stretch {
23            0% {
24               transform: scale(0.3);
25               background-color: red;
26               border-radius: 100%;
27            }
28            50% {
29               background-color: orange;
30            }
31            100% {
32               transform: scale(1.5);
33               background-color: yellow;
34            }
35         }
36
37         body,
38         html {
39            height: 100%;
40         }
41
42         body {
43            display: flex;
44            align-items: center;
45            justify-content: center;
46         }
47      </style>
48   </head>
49   <body>
50      <div class="element"></div>
51   </body>
52</html>

Gaia

01 Oct 2016

1<style>
2
3  #ball {
4    width: 100px;
5    height: 100px;
6    margin: 50px auto;
7    position: relative;
8    border-radius: 50%;
9    background: linear-gradient(
10      35deg,
11      #ccffff,
12      #ffcccc
13    );
14    /*"Call" the animation "function" */
15    animation-name: bounce;
16    animation-duration: 1s;
17    animation-iteration-count: infinite;
18    animation-delay: 2s;
19    /* Normal, reverse, alternate(between the fwd and back) 
20    and alternate-reverse */
21    animation-direction: reverse; 
22    /* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
23    animation-timing-function: linear; 
24    
25    /* if you want something to display from hidden
26       set the opacity to 0 and in the keyframe steps bring
27   	   the opacity to 1 gradually to stop it flashing */
28  }
29	
30  /* The animation "bounce" */
31  @keyframes bounce{
32    /* start */
33    0% {
34      top: 0px;
35    }
36    /* step (you can add multiple incremental steps from 1-100) */
37    50% {
38      top: 249px;
39      width: 130px;
40      height: 90px;
41    }
42    /* end (you can count down from 100 to 0 too) */
43    100% {
44      top: 0px;
45    }
46  }
47</style>
48
49<div id="ball"></div>

similar questions

animate css animation css propertry css animations animation properties css webkit animation animation in css animation css animated website using html and css what is the animation property in html and css animations css adding animation to images css

queries leading to this page