<!DOCTYPE html>
<
html
>
<
head
>
<
title
> Primer CSS Animations </
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
div
class
=
"text-center"
>
<
h1
class
=
"color-fg-success"
> GeeksforGeeks </
h1
>
<
strong
>Primer CSS Animations</
strong
>
</
div
>
<
div
class
=
"m-2 p-2 Box"
>
<
span
class
=
"anim-fade-down"
>
<
svg
width
=
"12"
height
=
"16"
viewBox
=
"0 0 12 16"
class
=
"octicon octicon-check"
aria-hidden
=
"true"
>
<
path
fill-rule
=
"evenodd"
d
=
"M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"
/>
</
svg
>
</
span
>
<
span
class
=
"content p-2"
>Primer CSS Fade Down Animation</
span
>
<
span
class
=
"anim-scale-in"
>
<
svg
width
=
"12"
height
=
"16"
viewBox
=
"0 0 12 16"
class
=
"octicon octicon-check"
aria-hidden
=
"true"
>
<
path
fill-rule
=
"evenodd"
d
=
"M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"
/>
</
svg
>
</
span
>
<
span
class
=
"content p-2"
>Primer CSS Scale In Animation</
span
>
<
span
class
=
"anim-grow-x"
>
<
svg
width
=
"12"
height
=
"16"
viewBox
=
"0 0 12 16"
class
=
"octicon octicon-check"
aria-hidden
=
"true"
>
<
path
fill-rule
=
"evenodd"
d
=
"M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"
/>
</
svg
>
</
span
>
<
span
class
=
"content p-2"
>Primer CSS Grow X Animation</
span
>
</
div
>
<
strong
>Primer CSS Hover Animation
<
div
class
=
"m-2 p-2 anim-hover-grow Box"
>
<
svg
width
=
"12"
height
=
"16"
viewBox
=
"0 0 12 16"
class
=
"octicon octicon-check anim-rotate"
aria-hidden
=
"true"
>
<
path
fill-rule
=
"evenodd"
d="M6.3 5.69a.942.942 0 0
1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28
0 .52.09.7.28.18.19.28.42.28.7
0 .28-.09.52-.28.7a1 1 0
0 1-.7.3c-.28 0-.52-.11-.7-.3zM8
7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-
.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31
.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27
0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7
2.3c-3.14 0-5.7 2.54-5.7 5.68
0 3.14 2.56 5.7 5.7 5.7s5.7-2.55
5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7
.98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
/>
</
svg
>
<
span
class
=
"content p-2"
>Primer CSS Rotate Animation</
span
>
<
span
class
=
"anim-pulse"
>
<
svg
width
=
"12"
height
=
"16"
viewBox
=
"0 0 12 16"
class
=
"octicon octicon-check"
aria-hidden
=
"true"
>
<
path
fill-rule
=
"evenodd"
d
=
"M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"
/>
</
svg
>
</
span
>
<
span
class
=
"content p-2"
>Primer CSS Pulse Animation</
span
>
</
div
>
</
body
>
</
html
>