(Frontend_7) CSS Transition & Animation

Transition

Suppose we have the following setting:

<a href="#" class="btn">send</a>

with CSS

.btn{
display: inline-block;
padding: 10px 20px;
background-color: red;
color: black;
}
.btn:hover{
background-color: green;
}

Then the color before and after mouse touching

before:

after:

If we want to have the effect that the color of the button gradually become green from red, then we should add transition in the .btn as follow

.btn{
display: inline-block;
padding: 10px 20px;
background-color: red;
color: black;
transition: all 1s 0s ease;
}
.btn:hover{
background-color: green;
}

The order of the arguments of transition :

transition: <property> <duration> <delay> <time-function>;

meaning it is going to wait <delay> to let the specific <property> in .btn:hover to have effect and the duration time is <duration> . The <time-function> is how the interval of duration time set up.

Animation

Suppose we have the following setting:

<div class="box"></div>

with CSS

.box{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}

Then the layout would be

If we add the frame, the script of the animation as follow

.box{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
animation: identifier 2s 2s;
}
@keyframes identifier {
0% {border-radius: 50%; }
100% {border-radius: 0%; }
}

There would be animation.

Reference

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store