Scribd
Upload
8 views

05.CSS Advanced Properties

Uploaded by

samsungforce162
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

05.CSS Advanced Properties

Uploaded by

samsungforce162
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 51

Web Programming

President University Faculty of Computing

Week 05 - CSS Advanced Properties


Border Radius
Control the style of the border and make it possible to have rounded borders, also to set image as the borders

Property Description Possible Values

border-radius A shorthand property for setting all border border-top-left-radius


radius border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

border-top-left-radius Set top left corner radius pixel


%

border-top-right-radius Set top right corner radius pixel


%

border-bottom-right-radius Set bottom right corner radius pixel


%

border-bottom-left-radius Set bottom left corner radius pixel


%
1. Set all borders by properties and shorthand
<head>
<style>
div {
border: 2px solid green;
width: 200px;
height: 100px;
margin-top: 20px;
padding: 50px;
}

.corner-each {
border-top-left-radius: 15px;
border-top-right-radius: 50px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 5px;
}

.corner-4 {
background-color: green;
border-radius: 15px 50px 30px 5px;
}
</style>
</head>
<body>
<div class="corner-each">
Hello
</div>
<div class="corner-4">
Hello
</div>
</body>
2. Set only one, two, three values only
<head>
<style>
div {
border: 2px solid green;
width: 200px;
height: 100px;
margin-top: 20px;
padding: 50px;
}

.one {
border-radius: 50px;
}

.two {
border-radius: 50% 30px;
}

.three {
border-radius: 40px 60px 15px;
}
</style>
</head>
<body>
<div class="one">
One value is for all corners
</div>
<div class="two">
If two values:<br/>
First is for top-left and bottom-right<br/>
Second is for top-right and bottom-left
</div>
<div class="three">
If three values:<br/>
First is for top-left<br/>
Second is for top-right and bottom-left<br/>
Third is for bottom-right
</div>
</body>
3. Set border to ellipse
<head>
<style>
#corner1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#corner2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#corner3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="corner1"></p>

<p>Elliptical border - border-radius: 15px / 50px:</p>


<p id="corner2"></p>

<p>Ellipse border - border-radius: 50%:</p>


<p id="corner3"></p>
</body>
Border Image
Use an image as a border. As a note, to use this property, the border property must be included!

Property Description Possible Values

border-image A shorthand property to set image to use border-image-source


as border border-image-slice
border-image-width
border-image-outset
border-image-repeat

border-image-source Specifies the path to the image to be url(URL)


used as a border

border-image-slice Specifies how to slice the border image fill


number
%

border-image-width Specifies the widths of the border image auto


number
%

border-image-outset Specifies the amount by which the border length


image area extends beyond the border number
box

border-image-repeat Specifies whether the border image stretch


should be repeated, rounded or stretched repeat
round
space
1. Border Image
<head>
<style>
#border-img-round {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}

#border-img-stretch {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<div>
Original Image is <img src="border.png"/>
</div>
<br/>
<div id="border-img-round">
border-image: url(border.png) 30 round;
</div>
<br/>
<div id="border-img-stretch">
border-image: url(border.png) 30 stretch;
</div>
</body>
2. Border Image using Separate properties
<head>
<style>
div {
border: 10px solid transparent;
padding: 15px;
border-image-source: url(border.png);
}

#bd1 {
border-image-slice: 5 fill;
}

#bd2 {
border-image-slice: 30;
border-image-repeat: space;
border-image-width: 20px;
}

#bd3 {
border-image-slice: 30;
border-image-repeat: space;
border-image-outset: 10px;
}
</style>
</head>
<body>
<div id="bd1">
border-image-slice: 5 fill;
</div>
<br/>
<div id="bd2">
border-image-slice: 30;
border-image-repeat: space;
border-image-width: 20px;
</div>
<br/>
<div id="bd3">
border-image-slice: 30;
border-image-repeat: space;
border-image-outset: 10px;
</div>
</body>
Color Functions
Options of function to set color values in CSS, including RGB, saturation, opacity, and taking current color
(currentcolor)

Property Description Possible Values

RGB rgb(0-255, 0-255, 0-255)

RGB with Alpha rgba(0-255, 0-255, 0-255, 0.0-1.0)

HSL (Hue, Saturation, Lightness) hsl(0-360, 0-100%, 0-100%)

HSL with Alpha hsla(0-360, 0-100%, 0-100%, 0.0-1.0)

Use same color in the tag currentcolor

opacity Sets the opacity / transparency of the Number from 0.0 - 1.0
element
1. Using RGB, RGBA, HSL, and HSLA
<head>
<style>
div {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
}

.rgb {
background-color: rgb(200, 143, 87);
}

.rgba {
background-color: rgb(154, 80, 210, 0.6);
}

.hsl {
background-color: hsl(120, 60%, 30%);
}

.hsla {
background-color: hsla(240, 37%, 54%, 0.4);
}
</style>
</head>
<body>
<div class="rgb">
Web Programming
</div>
<div class="rgba">
Web Programming
</div>
<br/>
<div class="hsl">
Web Programming
</div>
<div class="hsla">
Web Programming
</div>
</body>
2. Using currentcolor and opacity
<head>
<style>
div {
color: blue;
border: 1px dashed currentcolor;
height: 200px;
width: 200px;
}

.opaque {
color: red;
background-color: blue;
opacity: 0.4;
}
</style>
</head>
<body>
<div>
Web Programming
</div>
<br/>
<div class="opaque">
Background is opaque
</div>
</body>
Tooltips
Add tooltip in the elements to help user when the user hovers the pointer to a certain element

1. Right Tooltip
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */


position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
2. Left Tooltip
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */


position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
3. Top Tooltip
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */


position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me


<span class="tooltiptext">Tooltip text</span>
</div>

</body>
4. Bottom Tooltip
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */


position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me


<span class="tooltiptext">Tooltip text</span>
</div>

</body>
Gradient Functions
Function to set color in gradients. There are 3 (three) main gradient types: Linear, Radial, and Conic gradients.
Linear is defined by the directions (up, down, left, right, diagonal), Radial is defined by the center, and Conic is
defined by the rotation of the center point.

Property Description Possible Values

Define a linear gradient linear-gradient(angle, color1, color2, …, colorN)


linear-gradient(direction, color1, color2, …, colorN)

Using linear gradient with repeating-linear-gradient(color1 %, color2 %, …, colorN %)


repeat repeating-linear-gradient(angle, color1 %, color2 %, …, colorN %)

Define a radial gradient radial-gradient(color1, color2, …, colorN)


(must be 2 colors radial-gradient(shape, color1, color2, …, colorN)
minimum)

Using radial gradient with repeating-radial-gradient(color1 %, color2 %, …, colorN %)


repeat repeating-radial-gradient(shape, color1 %, color2 %, …, colorN %)

Define a conic gradient conic-gradient(color1, color2, …, colorN)


conic-gradient(shape, color1, color2, …, colorN)

Using conic gradient with repeating-conic-gradient(color1 %, color2 %, …, colorN %)


repeat repeating-conic-gradient(deg color1, deg color2, …, deg colorN)
1. Linear Gradient variations
<head>
<style>
div {
height: 200px;
width: 200px;
}

#grd {
color: white;
background-image: linear-gradient(63deg, red, blue, green);
}

#right-grd {
color: black;
background-image: linear-gradient(to right, rgba(100, 0, 0, 0.1),
rgba(255, 0, 0, 1.0));
}

#repeat-grd {
background-image: repeating-linear-gradient(135deg, pink, red,
orange);
}
</style>
</head>
<body>
<div id="grd">
Hello World
</div>
<br/>
<div id="right-grd">
Web Programming
</div>
<br/>
<div id="repeat-grd">
Repeating Color Gradient
</div>
</body>
2. Radial Gradient variations
<head>
<style>
div {
height: 200px;
width: 200px;
}

#grd {
color: white;
background-image: radial-gradient(pink, purple, black);
}

#right-grd {
color: black;
background-image: radial-gradient(circle, red, yellow, blue);
}

#repeat-grd {
background-image: repeating-radial-gradient(pink, purple 10%,
violet 15%);
}
</style>
</head>
<body>
<div id="grd">
Hello World
</div>
<br/>
<div id="right-grd">
Web Programming
</div>
<br/>
<div id="repeat-grd">
Repeating Color Gradient
</div>
</body>
3. Conic Gradient variations
<head>
<style>
div {
height: 200px;
width: 200px;
}

#grd {
color: white;
background-image: conic-gradient(pink, purple, black);
}

#right-grd {
color: black;
background-image: conic-gradient(red 120deg, yellow 120deg,
blue);
}

#repeat-grd {
background-image: repeating-conic-gradient(pink, purple 10%,
violet 15%);
}
</style>
</head>
<body>
<div id="grd">
Hello World
</div>
<br/>
<div id="right-grd">
Web Programming
</div>
<br/>
<div id="repeat-grd">
Repeating Color Gradient
</div>
</body>
Shadow Manipulation
Add effects of shadow in the text or element

Property Description Possible Values

text-shadow Applies shadow to text vertical (px)


horizontal (px)
color
blur

box-shadow Applies shadow to element as box vertical (px)


horizontal (px)
color
blur
spread (px)
inset
1. Text Shadowing using normal, color and blur
<head>
<style>
.shadow1 {
text-shadow: 2px 2px;
}

.pink-shadow {
text-shadow: 3px 3px pink;
}

.red-blur {
text-shadow: 3px 3px 5px red;
}
</style>
</head>
<body>
<h2 class="shadow1">
Text Shadow
</h2>
<h2 class="pink-shadow">
Text Shadow
</h2>
<h2 class="red-blur">
Text Shadow
</h2>
</body>
2. Multi Shadow and Text Border
<head>
<style>
.multi-shadow {
color: white;
text-shadow: 2px 2px 3px black, 0 0 30px red, 0 0 2px yellow;
}

.text-border {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>
<h2 class="multi-shadow">
Text Shadow
</h2>
<h2 class="text-border">
Text Border
</h2>
</body>
3. Box Shadow
<head>
<style>
div {
background-color: orange;
width: 150px;
height: 150px;
}
.single {
box-shadow: 10px 10px;
}

.multi {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;;
}
</style>
</head>
<body>
<div class="single">
Box with shadow
</div>
<br/>
<div class="multi">
Box with Multi Shadow
</div>
</body>
Transformation
Transform object or element using CSS in 2-dimensional and 3-dimensional aspects

Property Description Possible Values

transform Property to handle transformation of For 2D:


elements in 2D or 3D perspective translate(x, y)
translateX(n)
Use matrix to combine all 2D and 3D translateY(n)
transformation methods into one as rotate(angle)
shorthand. scale(x, y)
scaleX(n)
For 2D: scaleY(n)
matrix( skew(x-angle, y-angle)
scaleX(n), skewX(angle)
skewY(angle), skewY(angle)
skewX(angle), matrix(n, n, n, n, n, n)
scaleY(n),
translateX(n), For 3D:
translateY(n) translate3d(x, y, z)
) translateX(n)
translateY(n)
translateZ(n)
scale3d(x, y, z)
scaleX(n)
scaleY(n)
scaleZ(n)
rotate3d(x, y, z, angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
perspective(n)
matrix3d(n, n, n, n, n, n, n, n, n, n,
n, n, n, n, n, n)

transform-origin Change position of transformed elements x-axis (left, center, right, length,
X-axis and Y-axis (2D) %)
X-axis, Y-axis, Z-axis (3D) y-axis (top, center, bottom,
length, %)
z-axis (length)

transform-style (3D Only) Specifies how nested elements flat


are rendered in 3D space preserve-3d

perspective (3D Only) Give 3D-positioned element length


some perspective

perspective-origin (3D Only) Defines position from which the x-axis (left, center, right, length,
user is looking at the 3D elements and only %)
the CHILDREN elements will get the effect y-axis (top, center, bottom,
and must be used with perspective property length, %)

backface-visibility (3D Only) Defines if the backface of an visible


element should be visible when facing user hidden
2D transformation
1. Translation
<head>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
.translate {
transform: translate(50px, 100px);
}
.translateX {
transform: translateX(200px);
}
.translateY {
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="translate">
move 50px to right and 100px down
</div>
<div class="translateX">
move 200px to right
</div>
<div class="translateY">
move 100px down
</div>
</body>
2. Rotate Clockwise (positive value) and Counter-Clockwise (negative value)
<head>
<style>
div {
margin: 50px 50px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.rotateCW {
transform: rotate(30deg);
}
.rotateCCW {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="rotateCW">
Rotate CW
</div>
<div class="rotateCCW">
Rotate CCW
</div>
</body>
3. Scaling elements, by X-Axis and Y-Axis
<head>
<style>
div {
display: inline-block;
margin: 50px 50px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.scale {
transform: scale(2, 3);
}
.scaleX {
transform: scaleX(0.5);
}
.scaleY {
transform: scaleY(0.5);
}
</style>
</head>
<body>
<div class="scale">
Scale width 2x and height 3x
</div>
<div class="scaleX">
Scale width half the size
</div>
<div class="scaleY">
Scale height half the size
</div>
</body>
4. Skewing elements
<head>
<style>
div {
display: inline-block;
margin: 50px 50px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.skew {
transform: skew(20deg, 30deg);
}
.skewX {
transform: skewX(10deg);
}
.skewY {
transform: skewY(40deg);
}
</style>
</head>
<body>
<div>normal</div>
<div class="skew">Skew X 20deg and Y 30deg</div>
<div class="skewX">Skew X 10deg</div>
<div class="skewY">Skew Y 40deg</div>
</body>
5. Combining all transformations using matrix function
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv1 {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv1">
Using the matrix() method.
</div>
<div id="myDiv2">
Another use of the matrix() method.
</div>
</body>
3D transformation
1. Rotate by X-Axis
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

#rotateX {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="rotateX">
This div element is rotated 150 degrees.
</div>
</body>
2. Rotate by Y-Axis
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

#rotateY {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="rotateY">
This div element is rotated 150 degrees.
</div>
</body>
3. Rotate by Z-Axis
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

#rotateZ {
transform: rotateZ(150deg);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="rotateZ">
This div element is rotated 150 degrees.
</div>
</body>
4. Perspective, using lesser value means closer to the user, and preserve the 3D perspective
<head>
<style>
#div1 {
position: relative;
width: 150px;
height: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: 100px;
}

#div3 {
position: relative;
width: 150px;
height: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: none;
}

#div2, #div4 {
position: absolute;
padding: 50px;
border: 1px solid black;
background-color: rgba(100, 100, 100, 0.5);
transform-style: preserve-3d;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div id="div1">
DIV1
<div id="div2">DIV2</div>
</div>
<br/>
<div id="div3">
DIV3
<div id="div4">DIV4</div>
</div>
</body>
5. Perspective origin
<head>
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: 100px;
perspective-origin: left;
}
#div2, #div4, #div6 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
background: rgba(100,100,100,0.5);
transform-style: preserve-3d;
transform: rotateX(45deg);
}
#div3 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: 100px;
perspective-origin: bottom right;
}
#div5 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: 100px;
perspective-origin: -90%;
}
</style>
</head>
<body>
<h2>perspective-origin: left:</h2>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<h2>perspective-origin: bottom right:</h2>
<div id="div3">DIV3
<div id="div4">DIV4</div>
</div>

<h2>perspective-origin: -90%:</h2>
<div id="div5">DIV5
<div id="div6">DIV6</div>
</div>
</body>
6. Create a Cube
<head>
<style>
.ex1 {
perspective: 800px;
}

.cube {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(30deg);
}

.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(100,100,100,0.5);
border: 1px solid red;
text-align: center;
line-height: 2em;
}

.front {transform: translateZ(1em);}


.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>
<div class="ex1">
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
Transitions
Create effect of transition

Property Description Possible Values

transition Shorthand property to set all transition-duration


transitions transition-delay
transition-property
transition-timing-function

transition-delay Specify delay in seconds for the time_in_seconds


transition effect

transition-duration Specify how many seconds of time_in_seconds


milliseconds for effect to complete time_in_milliseconds

transition-property Specify name of CSS property to CSS properties


take effect

transition-timing-function Specify speed curve of transition ease


effect linear
ease-in
ease-out
ease-in-out
step-start
step-end
1. Transition using shorthand
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition: 2s 0s width linear;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>
Hover cursor over the box
<div></div>
</body>
2. Transition using all properties
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition-delay: 0s;
transition-duration: 2s;
transition-property: width;
transition-timing-function: linear;
}

div:hover {
width: 300px;
}
</style>
</head>
<body>
Hover cursor over the box
<div></div>
</body>
3. Mixed transition
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
transition-delay: 0s;
transition-duration: 2s;
transition-property: width background-color border-radius;
transition-timing-function: linear;
}

div:hover {
width: 300px;
background-color: black;
border-radius: 50%;
}
</style>
</head>
<body>
Hover cursor over the box
<div></div>
</body>
Animations
Add animation in CSS

Property Description Possible Values

animation Shorthand property to set all animation-name


animation properties animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

animation-delay Specify delay before starting time


animation

animation-duration Specify how long should the time


animation run

animation-name Specify name of @keyframes keyframe name


animation

animation-iteration-count Specify how many times animation infinite


should play n-times

animation-direction Specify how the animation should normal


play reverse
alternate
alternate-reverse

animation-timing-function Specify speed of curve in animation linear


ease
ease-in
ease-out
ease-in-out
step-start
step-end
steps(int, start, end)
cubic-bezier(n, n, n, n)

animation-fill-mode Specify a style when animation is not none


playing forwards
backwards
both

animation-play-state Specify if animation is playing or paused


being paused running

@keyframes Specify animation codes animationname {keyframes-


selector {css-styles;}}
1. Keyframes to add animation based on name
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> Go to original state after finished.</p>

</body>
2. Infinite animation, with 2 seconds delay at start
This animation runs for 4 seconds
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>Infinite Moving Animation</h1>
<div></div>
</body>
3. Shorthand
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: example 4s infinite ease-in-out;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>Infinite Moving Animation</h1>
<div></div>
</body>
4. Mixed Mode: Transition, Transform and Animation
<head>
<style>
div {
margin: 100px 100px;
height: 100px;
width: 100px;
border: 1px solid transparent;
transition: 1s linear;
background-color: red;
animation: example 1s infinite linear;
border-radius: 30%;
}

h1 {
animation: text 1s infinite linear;
}

@keyframes text {
0% {
background-image: radial-gradient(red, orange, yellow);
}
25% {
background-image: radial-gradient(lime, greenyellow, green);
}
50% {
background-image: radial-gradient(teal, turquoise, skyblue);
}
75% {
background-image: radial-gradient(royalblue, blue, mediumblue);
}
100% {
background-image: radial-gradient(red, orange, yellow);
}
}

@keyframes example {
0% {
background-image: radial-gradient(red, orange, yellow);
transform: rotate(0deg) scale(0.5);
}
25% {
background-image: radial-gradient(lime, greenyellow, green);
transform: rotate(90deg) scale(1.0);
}
50% {
background-image: radial-gradient(teal, turquoise, skyblue);
transform: rotate(180deg) scale(1.5);
}
75% {
background-image: radial-gradient(royalblue, blue, mediumblue);
transform: rotate(270deg) scale(1.0);
}
100% {
background-image: radial-gradient(red, orange, yellow);
transform: rotate(360deg) scale(0.5);
}
}
</style>
</head>
<body>
<h1><marquee>LET'S HAVE FUN</marquee></h1>
<div></div>
</body>

You might also like