CSS Animation Sample

Developer
Tomoyuki Kashiro
Size
2,896 Kb
Views
14,168
  1. CSS Animation Sample Previews
  2. CSS Animation Sample HTML Codes
  3. CSS Animation Sample CSS Codes

How do I make an css animation sample?

Reference : http://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/. What is a css animation sample? How do you make a css animation sample? This script and codes were developed by Tomoyuki Kashiro on 19 January 2023, Thursday.

CSS Animation Sample Previews
IQ Test

CSS Animation Sample - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Animation Sample</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="outer"> <h1 class="title">Fade</h1> <div class="target fade"> <p class="text">Fade</p> </div>
</section>
<section class="outer"> <h1 class="title">Grow</h1> <div class="target grow"> <p class="text">Grow</p> </div>
</section>
<section class="outer"> <h1 class="title">Rotate</h1> <div class="target rotate"> <p class="text">Rotate</p> </div>
</section>
<section class="outer"> <h1 class="title">Shadow</h1> <div class="target shadow"> <p class="text">Shadow</p> </div>
</section>
<section class="outer"> <h1 class="title">Swing</h1> <div class="target swing"> <p class="text">Swing</p> </div>
</section>
</body>
</html>

CSS Animation Sample - Script Codes CSS Codes

/* ------------------------------------------- common
---------------------------------------------*/
.html, body { width: 100%; height: 100%; background-color: #000;
}
.title { color: #fff; border-bottom: 1px solid #fff;
}
.outer { width: 500px; height: 300px; margin: 20px auto 0 auto;
}
.target { width: 300px; height: 200px; margin: 0 auto; background-color: #ccc; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.target .text { font-size: 2rem; text-align: center; line-height: 200px;
}
/* ------------------------------------------- fade
---------------------------------------------*/
.fade { opacity: 0.5;
}
.fade:hover { opacity: 1;
}
/* ------------------------------------------- grow
---------------------------------------------*/
.grow:hover { -webkit-transform: scale(1.2); transform: scale(1.2);
}
/* ------------------------------------------- rotate
---------------------------------------------*/
.rotate:hover { -webkit-transform: rotate(30deg); transform: rotate(30deg);
}
/* ------------------------------------------- shadow
---------------------------------------------*/
.shadow:hover { box-shadow: 1px 1px red, 2px 2px blue, 3px 3px yellow; -webkit-transform: translateX(-3px); transform: translateX(-3px);
}
/* ------------------------------------------- swing
---------------------------------------------*/
.swing:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease;
}
@-webkit-keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
CSS Animation Sample - Script Codes
CSS Animation Sample - Script Codes
Home Page Home
Developer Tomoyuki Kashiro
Username Tkashiro
Uploaded January 19, 2023
Rating 3
Size 2,896 Kb
Views 14,168
Do you need developer help for CSS Animation Sample?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tomoyuki Kashiro (Tkashiro) Script Codes
Name
Shadow Dom Test
Spotlight Effect
Responsive image srcset
Binary search algorithm in JavaScript
Bubble sort algorithm in JavaScrip
Simple arc animation
Centering Background Video
CSS Slideshow
Quick sort algorithm in JavaScrip
Media Fragments URI
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!