<div class="container">
<div class="one anim">
<p>1. Hello World, Wish you a speedy recovery</p>
</div>
<div class="two anim">
<p>2. Hello World, Wish you a speedy recovery</p>
</div>
<div class="three anim">
<p>3. Hello World, Wish you a speedy recovery</p>
</div>
<div class="four anim">
<p>4. Hello World, Wish you a speedy recovery</p>
</div>
<div class="five anim">
<p>5. Hello World, Wish you a speedy recovery</p>
</div>
<div class="six anim">
<p>6. Hello World, Wish you a speedy recovery</p>
</div>
<div class="seven anim">
<p>7. Hello World, Wish you a speedy recovery</p>
</div>
<div class="eight anim">
<p>8. Hello World, Wish you a speedy recovery</p>
</div>
<div class="nine anim">
<p>9. Hello World, Wish you a speedy recovery</p>
</div>
<div class="ten anim">
<p>10. Hello World, Wish you a speedy recovery</p>
</div>
<div class="eleven anim">
<p>11. Hello World, Wish you a speedy recovery</p>
</div>
<div class="twelve anim">
<p>12. Hello World, Wish you a speedy recovery</p>
</div>
<div class="thirteen anim">
<p>13. Hello World, Wish you a speedy recovery</p>
</div>
<div class="fourteen anim">
<p>14. Hello World, Wish you a speedy recovery</p>
</div>
<div class="fifteen anim">
<p>15. Hello World, Wish you a speedy recovery</p>
</div>
<div class="sixteen anim">
<p>16. Hello World, Wish you a speedy recovery</p>
</div>
<div class="seventeen anim">
<p>17. Hello World, Wish you a speedy recovery</p>
</div>
<div class="eighteen anim">
<p>18. Hello World, Wish you a speedy recovery</p>
</div>
<div class="nineteen anim">
<p>19. Hello World, Wish you a speedy recovery</p>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: auto;
overflow: hidden;
background: linear-gradient(to right, #f05053, #e1eec3);
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.anim {
margin: 20px 0;
font-size: 24px;
}
/* Animation one */
/* Simple animation, on hover the 'before' element get a hight of 50%*/
.one {
position: relative;
}
.one:before {
position: absolute;
background-color: rgba(10, 10, 10, 0.2);
content: "";
display: block;
width: 100%;
height: 0%;
left: 0;
bottom: 0;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.one:hover:before {
color: #fff;
height: 50%;
}
/* Animation Two */
/* Simple animation, on hover the 'before' element get a width of 100% from 0%*/
.two {
position: relative;
}
.two:before {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 0%;
height: 2px;
left: 0;
bottom: 0;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.two:hover:before {
color: #fff;
width: 100%;
}
/* Animation three */
/* Simple animation, on hover the 'before' element is scaled from 0 to 1*/
.three {
position: relative;
}
.three:before {
position: absolute;
background-color: #fff;
content: "";
display: block;
bottom: 0;
width: 100%;
height: 2px;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform: scale(0);
}
.three:hover:before {
color: #fff;
transform: scale(1);
}
/* Animation four */
/* Here the before element is placed at left 0, bottom 0 and after element at right 0, bottom 0 */
/* then on hover both get a width of 50% */
.four {
position: relative;
}
.four:before,
.four:after {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 0;
height: 2px;
transition: width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.four:before {
left: 0;
bottom: 0;
}
.four:after {
right: 0;
bottom: 0;
}
.four:hover:before,
.four:hover:after {
color: #fff;
width: 50%;
}
/* Animation five */
/* Here on hover the 'after' element is scaled from 0 to 1 and transform origin is changed from right to left */
.five {
position: relative;
}
.five:after {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 100%;
bottom: 0;
left: 0;
height: 2px;
transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform-origin: right;
transform: scaleX(0);
}
.five:hover:after {
transform-origin: left;
transform: scaleX(1);
}
/* Animation six */
/* Here both before and after elements get a width of 100% from 0 on hover */
.six {
position: relative;
}
.six:after,
.six:before {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 100%;
bottom: 0;
left: 0;
height: 2px;
transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform: scaleX(0);
}
.six:before {
top: 0;
}
.six:hover:after,
.six:hover:before {
transform: scaleX(1);
}
/* Animation seven */
/* Width is increased same as the above example, only difference is transform origin is changed to */
/* oppositee directions */
.seven {
position: relative;
}
.seven:after,
.seven:before {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 100%;
height: 2px;
transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform: scaleX(0);
}
.seven:before {
left: 0;
top: 0;
transform-origin: right;
}
.seven:after {
right: 0;
bottom: 0;
transform-origin: left;
}
.seven:hover:before {
transform: scaleX(1);
transform-origin: left;
}
.seven:hover:after {
transform: scaleX(1);
transform-origin: right;
}
/* Animation eight */
/* Before and after elements' width get increased from 0 to 50% on hover */
.eight {
position: relative;
}
.eight:after,
.eight:before {
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
content: "";
display: block;
width: 1px;
height: 100%;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.eight:before {
left: 0;
}
.eight:after {
right: 0;
top: 0;
}
.eight:hover:before,
.eight:hover:after {
width: 50%;
}
/* Animation nine */
/* Before element's width get increased from 0 to 100% on hover */
.nine {
position: relative;
}
.nine:before {
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
content: "";
display: block;
width: 1px;
height: 100%;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
left: 0;
}
.nine:hover:before {
width: 100%;
}
/* Animation ten */
/* Before and after elements' height get increased from 0 to 50% on hover */
.ten {
position: relative;
}
.ten:before,
.ten:after {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: calc(100% + 10px);
height: 0;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
bottom: 0;
}
.ten:before {
left: -5px;
top: 0;
}
.ten:after {
right: -5px;
}
.ten:hover:before,
.ten:hover:after {
height: 50%;
}
/* Animation eleven */
/* Before element's bottom value is increased from 0 10 100% */
.eleven {
position: relative;
}
.eleven:before,
.eleven:after {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 100%;
height: 1px;
transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
right: 0;
bottom: 0;
}
.eleven:hover:before {
bottom: 100%;
}
/* Animation twelve */
/* The height of after element is reduced from 100% to 0, after a short delay the height of */
/* before element is increased from 0 to 100% */
.twelve {
position: relative;
z-index: 1;
}
p {
position: relative;
z-index: 10;
color: #111;
}
.twelve:before,
.twelve:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 0;
transition: all 300ms 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
right: 0;
z-index: 1;
transform: scale(1);
}
.twelve:after {
height: 100%;
background-color: #e1eec3;
transition: all 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
bottom: 0;
}
.twelve:hover:before {
background-color: red;
height: 100%;
top: 0;
}
.twelve:hover:after {
height: 0px;
}
/* Animation thirteen */
/* The width of after element is reduced from 100% to 0, after a short delay the width of */
/* before element is increased from 0 to 100% */
.thirteen {
position: relative;
z-index: 1;
}
p {
position: relative;
z-index: 10;
color: #111;
}
.thirteen:before,
.thirteen:after {
position: absolute;
content: "";
display: block;
width: 0;
height: 100%;
transition: all 600ms 10ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
z-index: 1;
transform: scale(1);
}
.thirteen:after {
height: 100%;
background-color: #e1eec3;
transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
width: 100%;
right: 0;
top: 0;
}
.thirteen:before {
left: 0;
}
.thirteen:hover:before {
background-color: red;
width: 100%;
}
.thirteen:hover:after {
width: 0px;
}
/* Animation Fourteen */
/* The width of after element and before element is increased from 0 to 100%, the height is set to 50%*/
/* before element is placed at top 0 and after element is placed at bottom 0 */
.fourteen {
position: relative;
}
.fourteen p {
color: #fff;
}
.fourteen:before,
.fourteen:after {
position: absolute;
content: "";
display: block;
width: 0;
height: 50%;
bottom: 0;
}
.fourteen:before {
left: 0;
top: 0;
background-color: #f05053;
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.fourteen:after {
left: 0;
bottom: 0;
background-color: #d61796;
transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fourteen:hover:before,
.fourteen:hover:after {
width: 100%;
}
/* Animation fifteen */
/* The width of after element is reduced from 100% to 0, after a short delay the width of the */
/* before element is increased from 0 to 100%, here the text is placed on the before and after */
/* sudo elements and the opacity of paragraph is set to 0 always */
.fifteen {
position: relative;
z-index: 1;
overflow: hidden;
background-color: #e1eec3;
}
.fifteen p {
position: relative;
color: transparent;
}
.fifteen:before,
.fifteen:after {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.fifteen:after {
background-color: #e1eec3;
content: "15. Hello World, Wish you a speedy recovery";
right: 0;
top: 0;
transition: width 800ms 10ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.fifteen:before {
content: "We will win aganist Covid 19";
opacity: 0;
text-align: center;
width: 0;
left: 0;
transition: all 800ms 10ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.fifteen:hover:before {
background-color: red;
opacity: 1;
width: 100%;
z-index: 10;
}
.fifteen:hover:after {
width: 0px;
}
/* Animation sixteen */
/* On hover after element's height is reduced from 20 t 2 and width is incresed from 20% to 100% */
.sixteen {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.sixteen:after {
position: absolute;
display: block;
width: 20%;
height: 20px;
overflow: hidden;
content: "";
background-color: #f05053;
transition: all 300ms ease;
bottom: 0;
}
.sixteen:hover:after {
height: 2px;
width: 100%;
}
/* Animation seventeen */
/* Before hover the before and after elements are translate 100px in opposite directions */
/* on hover the translateX is decreased from 100 to 0*/
.seventeen {
position: relative;
}
.seventeen:after,
.seventeen:before {
position: absolute;
display: block;
width: 100%;
height: 50%;
overflow: hidden;
content: "";
background-color: #f05053;
bottom: 0;
transform: translateX(100px);
opacity: 0;
transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.seventeen:after {
background-color: #e1eec3;
top: 0;
transform: translateX(-100px);
transition: all 320ms 50ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.seventeen:hover:before,
.seventeen:hover:after {
transform: translateX(0px);
opacity: 1;
}
/* Animation eighteen */
/* The after element is scaled from 0 to 1 and transform origin is changed from top to bottom on hover */
.eighteen {
position: relative;
}
.eighteen:after {
position: absolute;
background-color: #fff;
content: "";
display: block;
width: 100%;
bottom: 0;
height: 100%;
transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
transform-origin: top;
transform: scaleY(0);
}
.eighteen:hover:after {
transform-origin: bottom;
transform: scaleY(1);
}
/* Animation nineteen */
/* Before and after elements are translate in y direction */
.nineteen {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 10px;
}
.nineteen:after,
.nineteen:before {
position: absolute;
background-color: #111;
content: "";
display: block;
width: 80%;
bottom: 0;
height: 1px;
transform: translateY(20px);
transition: transform 300ms cubic-bezier(0.455, 0.03, 0.515, 1.955);
opacity: 0;
}
.nineteen:after {
width: 50%;
}
.nineteen:hover:after {
transform: translateY(-10px);
opacity: 1;
}
.nineteen:hover:before {
transform: translateY(-5px);
opacity: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.