<!DOCTYPE html>
<html>
<head>
<style>
.base {
padding: 30px;
width: 100px;
height: 100px;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 20px;
box-sizing: border-box;
background: pink;
}
#example1 {
animation: rotate 3s ease 1s infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#example2 {
animation: rotate_translate 3s linear 1s infinite;
}
@keyframes rotate_translate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
margin-left: 70%;
}
100% {
transform: rotate(360deg);
}
}
#example3 {
animation: rotate_translate_one_way 1.5s linear 1s infinite alternate;
}
@keyframes rotate_translate_one_way {
0% {
transform: rotate(0);
}
100% {
transform: rotate(180deg);
margin-left: 70%;
}
}
#example4:hover {
animation: rotate 3s ease infinite;
}
.base2 {
margin: 50px 20px;
font-size: 20px;
}
#bounce {
animation: bounce 2s linear 1s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-15px);
}
30% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
50% {
transform: translateY(0);
}
}
#flash {
animation: flash 2s linear 1s infinite;
}
@keyframes flash {
20% {
opacity: 0.1;
}
30% {
opacity: 1;
}
40% {
opacity: 0.1;
}
50% {
opacity: 1;
}
}
#shake {
animation: shake 2s linear 1s infinite;
}
@keyframes shake {
5% {
transform: translateX(-10px);
}
10% {
transform: translateX(10px);
}
15% {
transform: translateX(-10px);
}
20% {
transform: translateX(10px);
}
25% {
transform: translateX(-10px);
}
30% {
transform: translateX(10px);
}
35% {
transform: translateX(-10px);
}
40% {
transform: translateX(10px);
}
45% {
transform: translateX(-10px);
}
50% {
transform: translateX(0);
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p id="flash"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="bounce"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="shake"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="example1"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="example2"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="example3"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="example4"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="base"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
<p id="base2"><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
</head>
<body>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script src="animation.js"></script>
<style>
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
--animate-duration: 2s;
}
/* This changes all the animations globally */
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
</style>
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
<img class="animate__animated animate__fadeInUp animate__delay-1s" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
<img class="animate__animated animate__fadeInUp animate__delay-2s" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
<img class="animate__animated animate__fadeInUp animate__delay-3s" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
<img class="animate__animated animate__fadeInUp animate__delay-4s" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
<img class="animate__animated animate__fadeInUp animate__delay-5s" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
</body>
</html>
</body>
</html>
No comments:
Post a Comment