CSS animations.

Developer
Aaron Happe
Size
2,526 Kb
Views
10,120
  1. CSS animations. Previews
  2. CSS animations. HTML Codes
  3. CSS animations. CSS Codes
  4. CSS animations. JS Codes

How do I make an css animations.?

What is a css animations.? How do you make a css animations.? This script and codes were developed by Aaron Happe on 09 November 2022, Wednesday.

CSS animations. Previews
IQ Test

CSS animations. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS animations. </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class="body-svg">
<div class="clockWrapWrap"> <div class="clockWrap"> <svg class="ugh" id="clock" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 78 78.7" style="enable-background:new 0 0 78 78.7;" xml:space="preserve">
<g id="main-clock"> <!-- <circle class="st0" cx="39.2" cy="38.6" r="34.9"/> -->
</g>
<g id="dots"> <circle cx="39.2" cy="65.8" r="2.4"/> <circle cx="39.2" cy="11.4" r="2.4"/> <circle cx="12" cy="38.6" r="2.4"/> <circle cx="66.5" cy="38.6" r="2.4"/>
</g>
<g id="hands"> <line class="st1 hand1" x1="39.2" y1="38" x2="39.2" y2="11.4"/> <line class="st1 hand2" x1="39.2" y1="38" x2="39.2" y2="21.5"/>
</g>
</svg> </div>
</div>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS animations. - Script Codes CSS Codes

 .st0{stroke:#ccc;stroke-width:3;stroke-miterlimit:10;} .st1{stroke:#ccc;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;} .body-svg { width: 100%; background: linear-gradient(2deg, #4b89c2, #4d1d42); background-size: 400% 400%; height: 900px; text-align: center; -webkit-animation: GriadientBG 60s ease infinite; animation: GriadientBG 60s ease infinite; } @-webkit-keyframes GriadientBG { 0%{background-position:55% 0%} 50%{background-position:46% 100%} 100%{background-position:55% 0%} } @keyframes GriadientBG { 0%{background-position:55% 0%} 50%{background-position:46% 100%} 100%{background-position:55% 0%} } .clockWrapWrap { display: inline-block; } .clockWrap { display: inline-block; margin-top: 2em; box-shadow: 1px 1px 3px #000; transform-origin: bottom center; } .fall { -webkit-transform: translate3d(0, 300px, 0) rotate(45deg); } .clockWobble { -webkit-animation: wob .5s cubic-bezier(.17,.67,.63,1) 3; } @-webkit-keyframes wob{ 0% { -webkit-transform: rotate(3deg); } 10% { -webkit-transform: rotate(-3deg); } 20% { -webkit-transform: rotate(4deg); } 30% { -webkit-transform: rotate(-7deg); } 40% { -webkit-transform: rotate(3deg); } 50% { -webkit-transform: rotate(-2deg); } 60%{ -webkit-transform: rotate(3deg); } 70%{ -webkit-transform: rotate(-3deg); } 80% { -webkit-transform: rotate(11deg); } 90%{ -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } }	#clock { height: 300px; margin: 0 auto; cursor: pointer; } .hand1 { transform-origin: bottom center; -webkit-animation: handOne 1s linear infinite; } @-webkit-keyframes handOne { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .hand2 { transform-origin: bottom center; -webkit-animation: handTwo 60s linear infinite; } @-webkit-keyframes handTwo { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }

CSS animations. - Script Codes JS Codes

 $('.clockWrapWrap').on('mouseenter', function() { $('.clockWrap').addClass('clockWobble'); }); $('.clockWrapWrap').on('mouseleave', function() { $('.clockWrap').removeClass('clockWobble'); });
CSS animations. - Script Codes
CSS animations. - Script Codes
Home Page Home
Developer Aaron Happe
Username aaronhappe
Uploaded November 09, 2022
Rating 3
Size 2,526 Kb
Views 10,120
Do you need developer help for CSS animations.?

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!

Aaron Happe (aaronhappe) Script Codes
Name
FF - Accordion Layout - Mobile and iPad
Brand Landing Products JS
Map prototype
Shoprecord - bookmarkletCSS
Shop Record Bookmarklet
A Pen by Aaron Happe
Nat Banner Builder
Snap SVG exploration
Playing with CSS
FF - Accordion Layout - DT
Create amazing SEO content 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!