Calendar Animation 2

Developer
Chris
Size
1,939 Kb
Views
24,288
  1. Calendar Animation 2 Previews
  2. Calendar Animation 2 HTML Codes
  3. Calendar Animation 2 CSS Codes

How do I make an calendar animation 2?

Inspired by Dribble post http://drbl.in/oNCZ. What is a calendar animation 2? How do you make a calendar animation 2? This script and codes were developed by Chris on 21 August 2022, Sunday.

Calendar Animation 2 Previews
IQ Test

Calendar Animation 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Calendar Animation 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card flipOutTop animated infinite"> f
</div>
<div class="card flipOutBottom animated infinite"> <span class="bottom">f</span>
</div>
</body>
</html>

Calendar Animation 2 - Script Codes CSS Codes

@charset "UTF-8";
.card { width:140px; height:200px; background:white; border-radius:5px; transition: 0.3s; transform-style: preserve-3d; transition-delay: 0.3s; border:1px solid black; font-size:200px; text-align:center
}
.bottom { transform: scale(-1, 1);
}
/*helper animations*/
.animated { animation-duration:5s; animation-fill-mode: both;
}
.animated.infinite { animation-iteration-count: infinite;
}
@keyframes flipOutTop { from { transform: rotateX(0deg); } 2%, 4%, 6%, 8%, 10% { transform: rotateX(-60deg); transform: perspective(400px); } 1%, 3%, 7%, 9% { transform: rotateX(30deg); } 11% { transform: rotateX(0deg); transform: perspective(900px); } 30% { /* transform: perspective(0px) rotate3d(1, 0, 0, -20deg); opacity: 1;*/ } to { transform: perspective(900px); transform: rotateX(90deg); }
}
.flipOutTop { animation-name: flipOutTop; backface-visibility: visible !important; transform-origin: 50% 100%;
}
/*-----*/
@keyframes flipOutBottom { from { transform: rotateX(0deg); } 1%, 3%, 7%, 9% { transform: rotateX(-60deg); transform: perspective(400px); } 2%, 4%, 6%, 8%, 10% { transform: rotateX(30deg); } 15% { transform: rotateX(0deg); transform: perspective(900px); } 30% { } 100% { transform: perspective(900px); transform: rotateX(90deg); }
}
.flipOutBottom { animation-name: flipOutBottom; backface-visibility: visible !important; transform-origin: 50% 0%;
}
Calendar Animation 2 - Script Codes
Calendar Animation 2 - Script Codes
Home Page Home
Developer Chris
Username onlinechris
Uploaded August 21, 2022
Rating 3
Size 1,939 Kb
Views 24,288
Do you need developer help for Calendar Animation 2?

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!

Chris (onlinechris) Script Codes
Name
Ripple Effect Material Design
Animated CSS3 mail mascot
Menu icon, animated upon open and close.
Twitter SVG icon
Play to Pause, material design style
Animated Hamburger Menu Icon with Material Design Open Transition
IPhone5S SVG Space Grey
Animated CSS3 gradient button for e-mail
SVG food icons
Calendar Animation
Create amazing blog posts 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!