Css animations

Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM

Animation shorthand css

animation: name time func delay iteration dir fill play;
animation: none 0s ease 0s 1 normal none running;

animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;

How to make animation stay on 100%

animation-fill-mode:forwards;

Css animation

.shrink { 
transition: all .2s ease-in-out; 
}

.shrink:hover { 
transform: scale(0.9); 
}

Source: codegrepper.com

Css animation linear

animation-timing-function: linear;

Css animations

div{
    animation-name: rotateElement;
    animation-duration: 6s;
    width: 100px;
    height: 100px;
    padding: 10px;
    text-align: center;
    background: yellow;
    border: 3px dashed blue;
}
@keyframes rotateElement{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

Source: programmersportal.com

Similar codes

1 vote223 views1 answer
The user specified as a definer does not exist
CSS
1 vote240 views1 answer
How to scale a bg image acc to size of div
CSS
0 vote213 views1 answer
Width calc(100 - 100px)
CSS
1 vote213 views1 answer
Css background rainbow
CSS
66 votes228 views6 answers
Remove bullets from list css
CSS
0 vote211 views1 answer
Import scss
CSS
8 votes208 views2 answers
Background image no repeat fill
CSS
0 vote211 views1 answer
Css mauszeiger ändern
CSS
0 vote196 views3 answers
To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
CSS
15 votes195 views2 answers
Custom selection color css
CSS