Scribd
Upload
21 views6 pages

Documento 23

The document contains HTML code defining an animated circular object with CSS animations that change its position and appearance over time. The animations can be toggled by clicking buttons.

Uploaded by

Miguel Fernández
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
21 views6 pages

Documento 23

The document contains HTML code defining an animated circular object with CSS animations that change its position and appearance over time. The animations can be toggled by clicking buttons.

Uploaded by

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

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
#object {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100%;
animation: animation1 2s infinite;
animation-duration: 2s;
}
@keyframes animation1 {
0% {transform:translateX(0px);}
25% {transform:translateX(200x);}
50% {transform:translateX(200px) translateY(200px);}
75% {transform:translateX(0px) translateY(200px);}
100% {transform:translateX(0px) translateY(0px);}
}
}
</style>

</head>
<body>
<div id="object"></div>

</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
#object {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100%;
animation: animation1 2s infinite animation: animation2 0.5s ease infinite;
animation-duration: 2s;
}
@keyframes animation1 {
0% {transform:translateX(0px);}
25% {transform:translateX(200x);}
50% {transform:translateX(200px) translateY(200px);}
75% {transform:translateX(0px) translateY(200px);}
100% {transform:translateX(0px) translateY(0px);}
}
@keyframes animation2 {
0% { border-radius: 100%;}
100% {border-radius: 100%; } ç
}
}
</style>

</head>
<body>
<div id="object"></div>

</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
#object {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100%;
animation: animation1 2s infinite animation: animation2 0.5s ease infinite alternate;
animation-duration: 2s;
}
@keyframes animation1 {
0% {transform:translateX(0px);}
25% {transform:translateX(200x);}
50% {transform:translateX(200px) translateY(200px);}
75% {transform:translateX(0px) translateY(200px);}
100% {transform:translateX(0px) translateY(0px);}
}
@keyframes animation2 {
0% { border-radius: 100%;}
100% {border-radius: 100%; } ç
}
}
</style>

</head>
<body>
<div id="object"></div>

</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
#object {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100%;
animation: animation1 2s infinite animation: animation2 0.5s ease infinite alternate;
animation-duration: 2s;
}
@keyframes animation1 {
0% {transform:translateX(0px);}
25% {transform:translateX(200x);}
50% {transform:translateX(200px) translateY(200px);}
75% {transform:translateX(0px) translateY(200px);}
100% {transform:translateX(0px) translateY(0px);}
}
@keyframes animation2 {
0% { border-radius: 100%; background: skyblue}
100% {border-radius: 0%; background: red } ç
}
}
</style>

</head>
<body>
<div id="object"></div>

</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
#object {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100%;
animation: animation1 2s ease infinite, animation2 0.5s ease infinite;
animation-duration: 2s;
}
@keyframes animation1 {
0% {transform:translateX(0px);}
25% {transform:translateX(200x);}
50% {transform:translateX(200px) translateY(200px);}
75% {transform:translateX(0px) translateY(200px);}
100% {transform:translateX(0px) translateY(0px);}
}

@keyframes animation2 {
0% {border-radius:100%;background: skyblue;}
100% {border-radius:0%;background: red;}
}
</style>
<button onclick="object.style.animation= "animation1 2s ease infinite">animation1</button>
<button onclick="object.style.animation= "animation2 2s ease infinite alternate">animation1</button>
</head>
<body>
<div id="object"></div>

</body>
</html>

You might also like