Scribd
Upload
28 views13 pages

Experiment 5: Design A Code To Implement of CSS3 Transformation, Transition and Animation

The document describes an experiment by Parth Mehta to implement CSS3 transformations, transitions, and animations. It includes HTML and CSS code examples to demonstrate 2D transformations using properties like translate, rotate, scale, and skew. It also includes animation examples using @keyframes and transition properties like width, height, and timing functions on hover. The conclusion states the experiment helped learn CSS3 concepts like transformations, transitions, and animations.

Uploaded by

Parth Mehta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views13 pages

Experiment 5: Design A Code To Implement of CSS3 Transformation, Transition and Animation

The document describes an experiment by Parth Mehta to implement CSS3 transformations, transitions, and animations. It includes HTML and CSS code examples to demonstrate 2D transformations using properties like translate, rotate, scale, and skew. It also includes animation examples using @keyframes and transition properties like width, height, and timing functions on hover. The conclusion states the experiment helped learn CSS3 concepts like transformations, transitions, and animations.

Uploaded by

Parth Mehta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Name: Parth Mehta

Roll No: 65
Branch: AIML

Experiment 5: Design a code to implement of CSS3


transformation, transition and animation.
Aim: - To implement CSS3 transformation, transition and animation.
Implementation: -
1] 2D Transformation in CSS3:
HTML CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CSS 2D Transformation</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-


awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">

<style>
body {
font-family: "Comic Sans MS", sans-serif;
}

button {
background-image: url("img/image4.jpeg");
color: white;
border: none;
font-size: 22px;
padding: 12px 35px;
box-shadow: 0 0 5px black;
}

.translate {
transform: translate(10px, 20px);
}

.rotate_clock {
transform: rotate(45deg);
Name: Parth Mehta
Roll No: 65
Branch: AIML

.rotate_counter {
transform: rotate(-45deg);
}

.scale_up {
transform: scale(2, 3);
}

.scale_down {
transform: scale(0.8, 0.8);
}

.skew_pos {
transform: skew(20deg, 20deg);
}

.skew_neg {
transform: skew(-20deg, -20deg);
}

.matrix {
transform: matrix(1, 2, -1, 1, 80, 80);
}
</style>

</head>

<body>

<h3>translate(10px,20px);</h3>

<button class="translate">

translate()

</button>

<hr>

<h3>rotate(45deg );</h3>

<button class="rotate_clock">

rotate_clock
Name: Parth Mehta
Roll No: 65
Branch: AIML

</button>
<hr>
<h3>rotate(-45deg);</h3>
<button class="rotate_counter">
rotate_counter_clock
</button>
<hr>
<h3>scale(2,3);</h3>
<button class="scale_up">
scale up
</button>
<hr>
<h3>scale(0.8,0.8);</h3>
<button class="scale_down">
scale down
</button>
<hr>
<h3>skew(20deg,20deg);</h3>
<button class="skew_pos">
skew Pos
</button>
<hr>
<h3>skew(-20deg,-20deg);</h3>
<button class="skew_neg">
skew Neg
</button>
<hr>
<h3>matrix(1, 2, -1, 1, 80, 80)</h3>
<button class="matrix">
matrix
</button>
<hr>
</body>

</html>
Name: Parth Mehta
Roll No: 65
Branch: AIML

Output:

2] Animation in CSS3:
HTML CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CSS3 Animation</title>

<style>
body {
font-family: "Comic Sans MS", sans-serif;
}
/* The animation code */

@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}

.simple {
Name: Parth Mehta
Roll No: 65
Branch: AIML

width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

.spin {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
animation: spin 4s infinite linear;
}

@keyframes ticker {
0% {
margin-top: 0
}
25% {
margin-top: -30px
}
50% {
margin-top: -60px
}
75% {
margin-top: -90px
}
100% {
margin-top: 0
}
}

.news {
margin: 20px;
animation: ticker 4s infinite linear;
}
Name: Parth Mehta
Roll No: 65
Branch: AIML

</style>

</head>

<body>

<h3>Simple Animation</h3>

<div class="simple"></div>

<hr>

<h3>Spin Animation</h3>

<div class="spin"></div>

<hr>

<h3>News Animation</h3>

<div class="news">

<p>Latest News: Russian Army attacks on Ukrain 9 dead and 57


injured.</p>

</div>

<hr>

</body>

</html>
Name: Parth Mehta
Roll No: 65
Branch: AIML

Output:

3] Transition in CSS3:
HTML CODE:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>CSS 3 Transitions</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-


awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">


Name: Parth Mehta
Roll No: 65
Branch: AIML

<style>
body {
font-family: "Comic Sans MS", sans-serif;
}

div {
height: 100px;
width: 100px;
background-image: url("img/image6.jpeg");
border-radius: 10px;
box-shadow: 0 0 15px black;
}

.t_width {
transition: width 2s;
}

.t_width:hover {
width: 300px;
}

.t_height {
transition: height 2s;
}

.t_height:hover {
height: 300px;
}

.t_both {
transition: height, width 4s;
}

.t_both:hover {
width: 300px;
height: 300px;
}

.t_rotate {
transition-delay: 10s;
transition-property: rotate;
}

.t_rotate:hover {
transform: rotate(-45deg);
}
Name: Parth Mehta
Roll No: 65
Branch: AIML

.t_timing {
transition-delay: 10s;
transition-property: scale;
transition-timing-function: ease-in-out;
}

.t_timing:hover {
transform: scale(2, 3);
}
</style>

</head>

<body>

<!-- Transition Width -->

<h2>Transition Width</h2>

<div class="t_width"> </div>

<!-- Transition Height -->

<h2>Transition Height</h2>

<div class="t_height"></div>

<!-- Transition Both -->

<h2>Transition Both</h2>

<div class="t_both"></div>

<!-- Transition Rotate -->

<h2>Transition Rotate</h2>

<div class="t_rotate"></div>

<!-- Transition Timing Function -->

<h2>Transition Timing Function</h2>

<div class="t_timing"></div>
</body>

</html>
Name: Parth Mehta
Roll No: 65
Branch: AIML

Output:
Name: Parth Mehta
Roll No: 65
Branch: AIML
Name: Parth Mehta
Roll No: 65
Branch: AIML
Name: Parth Mehta
Roll No: 65
Branch: AIML

Conclusion: -
Thus, we learnt how to CSS3 transition, transformation and animation.
Course Outcomes: -
1. Design static web pages using HTML5 and CSS3.
Learning Outcomes: -
1. To learn core concepts and features of CSS3

You might also like