Animation Play with cubic-bezier

Developer
Austin Wulf
Size
2,531 Kb
Views
38,456
  1. Animation Play with cubic-bezier Previews
  2. Animation Play with cubic-bezier HTML Codes
  3. Animation Play with cubic-bezier CSS Codes

How do I make an animation play with cubic-bezier?

What is a animation play with cubic-bezier? How do you make a animation play with cubic-bezier? This script and codes were developed by Austin Wulf on 13 September 2022, Tuesday.

Animation Play with cubic-bezier Previews
IQ Test

Animation Play with cubic-bezier - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animation Play with cubic-bezier</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container hide"> <div class="ball pulse"></div>
</div>
<div class="container hide"> <div class="panel swing-3d"> such swing </div>
</div>
<div class="container"> <div class="ball bounce"></div>
</div>
</body>
</html>

Animation Play with cubic-bezier - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { padding: 50px;
}
.hide { display: none;
}
.container { padding: 50px; margin: 50px;
}
.ball { display: block; width: 80px; height: 80px; background-color: #feabee; border-radius: 50%;
}
.panel { display: block; width: 200px; height: 80px; padding: 30px; text-align: center; background-color: #ace;
}
.pulse { -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; -webkit-animation-timing-function: cubic-bezier(0.5, 1, -0.5, 1.5); animation-timing-function: cubic-bezier(0.5, 1, -0.5, 1.5);
}
@-webkit-keyframes pulse { 0%, 50%, 100% { -webkit-transform: scale(1); transform: scale(1); } 25%, 75% { -webkit-transform: scale(2); transform: scale(2); }
}
@keyframes pulse { 0%, 50%, 100% { -webkit-transform: scale(1); transform: scale(1); } 25%, 75% { -webkit-transform: scale(2); transform: scale(2); }
}
.swing-3d { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: perspective(500px); transform: perspective(500px); -webkit-animation: swing .75s infinite; animation: swing .75s infinite; -webkit-animation-timing-function: cubic-bezier(0.57, 0.34, 0.38, 2.2); animation-timing-function: cubic-bezier(0.57, 0.34, 0.38, 2.2);
}
@-webkit-keyframes swing { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); }
}
@keyframes swing { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); }
}
.bounce { -webkit-animation: bounce .5s infinite; animation: bounce .5s infinite;
}
@-webkit-keyframes bounce { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.5, 1); animation-timing-function: cubic-bezier(0.2, 0, 0.5, 1); } 50% { -webkit-transform: translateY(-80px); transform: translateY(-80px); -webkit-animation-timing-function: cubic-bezier(0.3, 0, 0.9, 0.9); animation-timing-function: cubic-bezier(0.3, 0, 0.9, 0.9); }
}
@keyframes bounce { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.5, 1); animation-timing-function: cubic-bezier(0.2, 0, 0.5, 1); } 50% { -webkit-transform: translateY(-80px); transform: translateY(-80px); -webkit-animation-timing-function: cubic-bezier(0.3, 0, 0.9, 0.9); animation-timing-function: cubic-bezier(0.3, 0, 0.9, 0.9); }
}
Animation Play with cubic-bezier - Script Codes
Animation Play with cubic-bezier - Script Codes
Home Page Home
Developer Austin Wulf
Username atwulf
Uploaded September 13, 2022
Rating 3
Size 2,531 Kb
Views 38,456
Do you need developer help for Animation Play with cubic-bezier?

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!

Austin Wulf (atwulf) Script Codes
Name
Styling Native Select Inputs
Sassy Breadcrumbs
Canvas Pong
Functional DOM Manipulation
Simple Custom Select Box
CSS3 SVG Animation
JQuery Pagination Plugin
Pure CSS Off-Screen Menu
A Pen by Austin Wulf
Cross-Browser Element.matches
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!