HOME
I wanna share some videos! ☺
Music Video
This video will autoplay but is muted
music when I need to chill
This video is looped
MY Dance Group
This video does not display controls
Exercise 10: Animation Web Page
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 010 Animated Web page</title>
<link rel="stylesheet" href="Exercise 010 CSS.css">
</head>
<body>
<div> <h1 style="font-size:40px;"> Multimedia Arts </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br>
<p style="text-align: justify; text-indent: 50px;"> Multimedia arts & design is the creation of images and content using the latest design techniques and technology. Multimedia art includes animation, audio, interactivity, still images, text, and video. Multimedia artists and designers may combine traditional forms of art such as painting or sculpture with any of the mediums mentioned above. <br> </p>
<p style="text-align: justify; text-indent: 50px;">A typical multimedia art & design program curriculum consists of a combination of general education courses, core courses, electives, and studios. General education courses may fall into a number of categories such as the arts, humanities, natural sciences, social and behavioral sciences, writing and speaking, health and wellness, integrative studies, and quantification.
Examples of core courses and electives include:
3D Digital Art and Design Fundamentals
Animation Fundamentals
Application Development Design Studio
Design Concepts
Digital Art and Design Criticism
Digital Arts: Computer Graphics</p>
</body>
</html>
CSS
div {
width: 300px;
height: 50px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
@keyframes example {
0% {background-color:orange; 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:pink; left:0px; top:0px;}
}
}
