Saturday, 29 November 2025
Animated 3
<head>
<style>
@import "https://unpkg.com/open-props@1.6.17/easings.min.css";
@keyframes shake {
50% {
transform: translate3d(20px, 0, 0);
}
}
@keyframes flip {
100% {
transform: rotateY(180deg);
}
}
@keyframes pulse {
50% {
transform: scale(1.5);
}
}
@keyframes glitch {
50% {
transform: skew(180deg);
}
}
@keyframes fill {
50% {
transform: translateX(-5%);
}
}
@keyframes sheen {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
@keyframes glow {
50% {
box-shadow: 0 0 40px hsl(12, 100%, 60%);
}
}
@keyframes tonyhawk {
50%,
100% {
transform: rotate(900deg);
}
}
@keyframes blur {
50% {
filter: blur(20px);
transform: skew(45deg);
}
}
[anim="shake"]:not(.toggled) {
animation: shake var(--ease-elastic-in-1) 300ms infinite alternate;
}
[anim="pulse"]:not(.toggled) {
animation: pulse var(--ease-elastic-in-1) 1400ms infinite alternate;
}
[anim="glitch"]:not(.toggled) {
animation: glitch var(--ease-elastic-in-1) 600ms infinite;
}
[anim="tonyhawk"]:not(.toggled) {
animation: tonyhawk var(--ease-elastic-in-1) 600ms infinite;
}
[anim="flip"]:not(.toggled) {
animation: flip var(--ease-elastic-in-1) 600ms infinite alternate;
}
[anim="fill"]:not(.toggled)::after {
animation: fill var(--ease-spring-1) 8000ms infinite;
}
[anim="sheen"]:not(.toggled)::after {
animation: sheen var(--ease-elastic-in-1) 1s infinite;
}
[anim="glow"]:not(.toggled) {
animation: glow var(--ease-elastic-in-1) 600ms infinite alternate;
}
[anim="blur"]:not(.toggled) {
animation: blur var(--ease-elastic-in-1) 1s infinite alternate;
}
[anim="fill"]::after {
content: "";
color: var(--black);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.75rem;
height: 100%;
width: 200%;
inset: 0;
transform: translateX(-400px);
background-color: hsl(12, 90%, 63%);
}
[anim="sheen"]::after {
content: "";
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
background: var(--red-sheen);
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
:root {
--black: hsl(0, 0%, 13%);
--dark: hsl(12, 32%, 2%);
--gray: hsl(0, 0%, 70%);
--white: hsl(0, 0%, 96%);
--red: hsl(12, 90%, 63%);
--red-shadow: hsl(12, 100%, 60%);
--red-sheen: linear-gradient(
to bottom,
hsl(12, 90%, 43%),
hsla(12, 40%, 70%, 0.5) 50%,
hsl(12, 93%, 23%)
);
}
html,
body {
background-color: var(--black);
}
div:has(h2 + p) {
display: grid;
gap: 8px;
}
h2 {
font-size: 1.25rem;
}
h2 + p {
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray);
font-size: 0.875rem;
}
main {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
}
article {
display: flex;
flex-wrap: wrap;
gap: 64px;
align-items: center;
justify-content: center;
min-height: 100dvh;
position: relative;
padding-block: 32px;
&::after {
content: "";
width: 100%;
position: absolute;
height: 1px;
bottom: 0;
background-image: linear-gradient(45deg, var(--red), transparent 70%);
}
}
section {
display: flex;
flex-direction: column;
gap: 16px;
flex-basis: 180px;
justify-content: center;
align-items: center;
text-align: center;
}
section {
color: var(--white);
font-family: "aglet-mono-variable", sans-serif;
font-variation-settings: "wght" 400;
}
* {
font-family: inherit;
box-sizing: border-box;
}
button {
all: unset;
background-color: var(--black);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid var(--red);
box-shadow: 0 0 4px var(--red-shadow);
cursor: pointer;
perspective: 1000px;
position: relative;
overflow: hidden;
}
.blurry {
position: relative;
transform-style: preserve-3d;
}
.blurry::before {
content: "";
position: absolute;
inset: 0px;
transform: translate3d(0px, 0px, -1px);
background: var(--red-shadow);
filter: blur(6px);
}
</style>
<script>
let anims = [...document.querySelectorAll("[anim]")];
console.log(anims);
let click = (el, cb) => el.addEventListener("click", cb);
let toggle = (el) => el.classList.toggle("toggled");
let clickTog = (el) => click(el, () => toggle(el));
anims.map(clickTog);
</script>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<main>
<article>
<section>
<div>
<h2>Shakes</h2>
<p>Rejecti{ng</p>
</div>
<div>
<button>CLICK ME</button>
<img class="animate__animated animate__fadeInUp animate__delay-3s" anim="shake" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
</div>
</section>
<section>
<div>
<h2>Pulse</h2>
<p>Partying</p>
</div>
<div>
<button anim="pulse">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Glitch</h2>
<p>Hacking</p>
</div>
<div>
<button anim="glitch">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Turn</h2>
<p>Flipping</p>
</div>
<div>
<button anim="flip">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Fill</h2>
<p>Loading</p>
</div>
<div>
<button anim="fill">Click me</button>
</div>
</section>
<section>
<div>
<h2>Sheen</h2>
<p>Shining</p>
</div>
<div>
<button anim="sheen">Click me</button>
</div>
</section>
<section>
<div>
<h2>Emphasize</h2>
<p>Glowing</p>
</div>
<div>
<button anim="glow">Click me</button>
</div>
</section>
<section>
<div>
<h2>Blur</h2>
<p>Censoring</p>
</div>
<div>
<button anim="blur">CLICK ME</button>
</div>
</section>
<section>
<div>
<h2>Tony Hawk</h2>
<p>900-ing</p>
</div>
<div>
<button anim="tonyhawk">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Shakes</h2>
<p>Rejecting</p>
</div>
<div>
<button anim="shake">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Pulse</h2>
<p>Partying</p>
</div>
<div>
<button anim="pulse">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Glitch</h2>
<p>Hacking</p>
</div>
<div>
<button anim="glitch">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Turn</h2>
<p>Flipping</p>
</div>
<div>
<button anim="flip">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Fill</h2>
<p>Loading</p>
</div>
<div>
<button anim="fill">Click me</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Sheen</h2>
<p>Shining</p>
</div>
<div>
<button anim="sheen">Click me</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Emphasize</h2>
<p>Glowing</p>
</div>
<div>
<button anim="glow">Click me</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Blur</h2>
<p>Censoring</p>
</div>
<div>
<button anim="blur">CLICK ME</button>
</div>
</section>
</article>
<article>
<section>
<div>
<h2>Tony Hawk</h2>
<p>900-ing</p>
</div>
<div>
<button anim="tonyhawk">CLICK ME</button>
</div>
</section>
</article>
</main>
Animation 2
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
*
{
margin: 0;
padding: 0;
}
body
{
font-family: 'Lato', sans-serif;
font-size: 14px;
color: #999999;
word-wrap:break-word;
}
p
{
margin: 0 0 10px;
}
ul
{
list-style: none;
}
.container {
width: 100%;
margin: auto;
font-weight: 900;
text-transform: uppercase;
text-align: center;
padding: 0 0 200px;
}
/*.take-input {
margin: 50px 0 0;
}
.take-input input {
width: 400px;
height: 35px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ececec;
margin: 0 15px 0 0;
font-size: 15px;
}*/
a, a:link, a:visited {
text-decoration: none;
padding: 9px 15px;
border: 1px solid #ececec;
border-radius: 5px;
color: gray;
}
.animate {
font-size: 50px;
margin: 100px 0 0;
border-bottom: 2px solid #ccc;
}
.animate span {
display: inline-block;
}
a.repeat {
display: inline-block;
font-size: 12px;
text-transform: none;
text-decoration: none;
color: orange;
padding: 5px 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
font-weight: normal;
margin: 0 0 0 50px;
border-radius: 3px;
position: relative;
bottom: 15px;
}
a.repeat:hover {
background: rgba(0, 0, 0, 0.7);
color: white;
}
.animate span:nth-of-type(2) {
animation-delay: .05s;
}
.animate span:nth-of-type(3) {
animation-delay: .1s;
}
.animate span:nth-of-type(4) {
animation-delay: .15s;
}
.animate span:nth-of-type(5) {
animation-delay: .2s;
}
.animate span:nth-of-type(6) {
animation-delay: .25s;
}
.animate span:nth-of-type(7) {
animation-delay: .3s;
}
.animate span:nth-of-type(8) {
animation-delay: .35s;
}
.animate span:nth-of-type(9) {
animation-delay: .4s;
}
.animate span:nth-of-type(10) {
animation-delay: .45s;
}
.animate span:nth-of-type(11) {
animation-delay: .5s;
}
.animate span:nth-of-type(12) {
animation-delay: .55s;
}
.animate span:nth-of-type(13) {
animation-delay: .6s;
}
.animate span:nth-of-type(14) {
animation-delay: .65s;
}
.animate span:nth-of-type(15) {
animation-delay: .7s;
}
.animate span:nth-of-type(16) {
animation-delay: .75s;
}
.animate span:nth-of-type(17) {
animation-delay: .8s;
}
.animate span:nth-of-type(18) {
animation-delay: .85s;
}
.animate span:nth-of-type(19) {
animation-delay: .9s;
}
.animate span:nth-of-type(20) {
animation-delay: .95s;
}
/* Animation One */
.one span {
color: #24a8e6;
opacity: 0;
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
animation: revolveScale .4s forwards;
}
@keyframes revolveScale {
60% {
transform: translate(20px, 20px) rotate(30deg) scale(.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
/* Animation Two */
.two span {
color: #a5cb21;
opacity: 0;
transform: translate(200px, -100px) scale(2);
animation: ballDrop .3s forwards;
}
@keyframes ballDrop {
60% {
transform: translate(0, 20px) rotate(-180deg) scale(.5);
}
100% {
transform: translate(0) rotate(0deg) scale(1);
opacity: 1;
}
}
/* Animation Three */
.three span {
color: #b10e81;
opacity: 0;
transform: translate(-300px, 0) scale(0);
animation: sideSlide .5s forwards;
}
@keyframes sideSlide {
60% {
transform: translate(20px, 0) scale(1);
color: #b10e81;
}
80% {
transform: translate(20px, 0) scale(1);
color: #b10e81;
}
99% {
transform: translate(0) scale(1.2);
color: #00f0ff;
}
100% {
transform: translate(0) scale(1);
opacity: 1;
color: #b10e81;
}
}
/* Animation Four */
.four span {
color: #8d6a00;
opacity: 0;
transform: translate(0, -100px) rotate(360deg) scale(0);
animation: revolveDrop .3s forwards;
}
@keyframes revolveDrop {
30% {
transform: translate(0, -50px) rotate(180deg) scale(1);
}
60% {
transform: translate(0, 20px) scale(.8) rotate(0deg);
}
100% {
transform: translate(0) scale(1) rotate(0deg);
opacity: 1;
}
}
/* Animation Five */
.five span {
color: #dd3f0f;
opacity: 0;
transform: translate(0, -100px) rotate(360deg) scale(0);
animation: dropVanish .5s forwards;
}
@keyframes dropVanish {
30% {
transform: translate(0, -50px) rotate(180deg) scale(1);
}
50% {
transform: translate(0, 20px) scale(.8) rotate(0deg);
opacity: 1;
}
80% {
transform: translate(-100px, -100px) scale(1.5) rotate(-180deg);
opacity: 0;
}
100% {
transform: translate(0) scale(1) rotate(0deg);
opacity: 1;
}
}
/* Animation Six */
.six span {
color: #ddb40f;
opacity: 0;
transform: rotate(-180deg) translate(150px, 0);
animation: twister .5s forwards;
}
@keyframes twister {
10% {
opacity: 1;
}
100% {
transform: rotate(0deg) translate(0);
opacity: 1;
}
}
/* Animation Seven */
.seven span {
color: #348c04;
opacity: 0;
transform: translate(-150px, 0) scale(.3);
animation: leftRight .5s forwards;
}
@keyframes leftRight {
40% {
transform: translate(50px, 0) scale(.7);
opacity: 1;
color: #348c04;
}
60% {
color: #0f40ba;
}
80% {
transform: translate(0) scale(2);
opacity: 0;
}
100% {
transform: translate(0) scale(1);
opacity: 1;
}
}
</style>
<script>
/* This code is not required for the animation. This is only needed for the repeatation */
$(function(){
$('.repeat').click(function(){
var classes = $(this).parent().attr('class');
$(this).parent().attr('class', 'animate');
var indicator = $(this);
setTimeout(function(){
$(indicator).parent().addClass(classes);
}, 20);
});
});
</script>
<style>
.main-content
.concept.concept-one
- for (var i=1; i<10; i++)
.hover(class="hover-"+i)
h1 Desert
.concept.concept-two
each val, index in ['F','O','R','E','S','T']
.hover
h1= val
.concept.concept-three
.word
each val, index in ['C','A','N','Y','O','N']
.hover
div
div
h1= val
.concept.concept-four
h1 Glacier
.concept.concept-five
h1.word
each val, index in ['M','O','U','N','T','A','I','N','S']
span.char= val
.concept.concept-six
h1.word
each val, index in ['O','C','E','A','N']
span.char= val
.concept.concept-seven
h1 fries
.concept.concept-eight
h1.word
each val, index in ['F','A','L','L','S']
div.char(data-content=val)= val
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.icons
body {
background: #fff;
font-family: "Comfortaa", sans-serif;
position: relative;
}
footer {
text-align: center;
padding: 1em;
max-width: 80px;
position: fixed;
top: 0;
right: 25px;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #fff;
color: #fff;
margin: 5px;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
.icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
}
}
}
* {
box-sizing: border-box;
}
.main-content {
text-align: center;
text-transform: uppercase;
scroll-snap-type: y mandatory;
position: relative;
height: 100vh;
overflow-y: scroll;
}
.hover,
.word,
h1 {
cursor: pointer;
}
h1 {
position: relative;
color: #fff;
font: 900 60px Montserrat;
text-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.concept {
position: relative;
padding: 5em;
height: 100vh;
overflow: hidden;
scroll-snap-align: center;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(rgba(0, 0, 0, 0.3), transparent);
opacity: 0;
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
&:hover:before {
opacity: 0.5;
}
}
.concept-one {
display: grid;
grid: repeat(3, 1fr)/ repeat(3, 1fr);
background: yellow;
padding: 8em;
background: url("https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/desert.jpg")
no-repeat center center / cover;
h1 {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 50%;
margin-top: -30px;
transition: 0.5s ease;
z-index: 0;
letter-spacing: 25px;
}
.hover {
z-index: 1;
}
.hover-1:hover ~ h1 {
left: 30px;
margin-top: -10px;
}
.hover-2:hover ~ h1 {
margin-top: -10px;
}
.hover-3:hover ~ h1 {
right: 30px;
margin-top: -10px;
}
.hover-4:hover ~ h1 {
left: 30px;
}
.hover-6:hover ~ h1 {
right: 30px;
}
.hover-7:hover ~ h1 {
left: 30px;
margin-top: -50px;
}
.hover-8:hover ~ h1 {
margin-top: -50px;
}
.hover-9:hover ~ h1 {
right: 30px;
margin-top: -50px;
}
}
.concept-two {
display: grid;
grid: 100% / repeat(6, 1fr);
padding: 5em 15em;
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/forest.jpg)
center center / cover;
.hover {
position: relative;
display: grid;
place-items: center;
}
h1 {
color: transparent;
text-align: 0 1px 1px;
-webkit-text-stroke: 2px #fff;
text-shadow: none;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hover:hover h1 {
transform: scale(1.5);
color: #fff;
-webkit-text-stroke: 2px transparent;
text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
}
.concept-three {
padding: 5em;
.word {
display: flex;
align-items: center;
max-width: 500px;
margin: auto;
}
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/canyon.jpg)
center center / cover;
.hover {
flex: 1;
display: grid;
height: calc(100vh - 10em);
grid: repeat(2, 2fr) / 100%;
position: relative;
div {
position: relative;
z-index: 5;
}
div:nth-child(1):hover ~ h1 {
margin-top: -10px;
}
div:nth-child(2):hover ~ h1 {
margin-top: -50px;
}
}
h1 {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 50%;
margin-top: -30px;
transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 0;
}
}
.concept-four {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 2em;
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/glacier.jpg)
no-repeat center center / cover;
h1 {
display: inline-block;
}
&:hover h1 {
letter-spacing: 25px;
transform: scale(1.3);
transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}
.concept-five {
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/mountains.jpg)
center center / cover;
display: flex;
align-items: center;
.word {
width: 600px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
height: 80%;
&:hover {
.char:nth-child(even) {
top: 20px;
}
.char:nth-child(odd) {
top: -20px;
}
}
}
.char {
flex: 1;
position: relative;
display: inline-block;
top: 0;
transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
}
.concept-six {
display: flex;
align-items: center;
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/beach.jpg) top
right / cover;
.word {
width: 550px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
height: 80%;
&:hover {
.char:nth-child(1) {
margin-top: -30px;
transform: rotate(-20deg);
}
.char:nth-child(2) {
margin: -40px 0px 0 10px;
transform: rotate(5deg);
}
.char:nth-child(3) {
margin: 15px 0 0 10px;
transform: rotate(12deg);
}
.char:nth-child(4) {
margin: -25px 0 0;
transform: rotate(5deg);
}
.char:nth-child(5) {
margin: -40px 5px 0;
transform: rotate(-10deg);
}
}
}
.char {
flex: 1;
transition: 0.3s ease-in-out;
position: relative;
}
}
.concept-seven {
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/fries.jpg)
top center / cover;
display: flex;
justify-content: center;
align-items: center;
h1 {
letter-spacing: 35px;
position: relative;
&:before {
content: "fries";
position: absolute;
margin: auto;
left: 0;
right: 0;
max-width: 400px;
color: transparent;
letter-spacing: 10px;
text-shadow: none;
}
}
&:hover h1:before {
transition: 0.6s ease;
color: rgba(255, 255, 255, 0.8);
animation: jump-out 0.6s ease forwards;
}
}
@keyframes jump-out {
0% {
opacity: 0;
transform: scale(1);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(2);
}
}
.concept-eight {
background: url(https://meowlivia.s3.us-east-2.amazonaws.com/codepen/background/falls.jpg)
center center / cover;
display: flex;
align-items: center;
justify-content: center;
.word {
display: flex;
align-items: center;
justify-items: center;
width: 450px;
height: 80%;
&:hover .char:before {
transition: 0.6s ease;
color: rgba(255, 255, 255, 0.8);
animation: falls 1s ease forwards;
}
&:hover .char:nth-child(1):before {
animation: falls 0.9s ease 0.2s forwards;
}
&:hover .char:nth-child(2n + 3):before {
animation: falls 1s ease 0.3s forwards;
}
}
.char {
flex: 1;
position: relative;
&:before {
content: attr(data-content);
position: absolute;
top: 0;
color: transparent;
text-shadow: none;
}
}
}
@keyframes falls {
0% {
opacity: 0;
top: 0;
}
20% {
opacity: 1;
}
100% {
opacity: 0;
top: 100px;
}
}
</style>
<div class="my-element animate__animated animate__bounce animate__delay-2s">Example</div>
<img class="word" src="https://klinkhs.com/wp-content/uploads/2025/07/drink-to-your.jpg" width="244" height="144">
<img class="concept-eight" 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>
Animation Codes
<!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>
-
Google Fonts can depend on several factors such as the project type, audience, and design goals. However, here are some highly versatile and... -
Stem cell therapy holds promise in the treatment of diabetes, particularly type 1 diabetes, which is characterized by the destruction of in...
-
How to Find Profitable Niches for Google AdSense Earnings As the first step to finding profitable AdSense niches, publishers should explore ...