My First CSS Animation

Developer
Jacob Poston
Size
1,879 Kb
Views
12,144
  1. My First CSS Animation Previews
  2. My First CSS Animation HTML Codes
  3. My First CSS Animation CSS Codes

How do I make an my first css animation?

Tutorial followed from: http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068. What is a my first css animation? How do you make a my first css animation? This script and codes were developed by Jacob Poston on 27 December 2022, Tuesday.

My First CSS Animation Previews
IQ Test

My First CSS Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My First CSS Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--My first animation-->
<!--https://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068-->
<div class="box-circle-transform"></div>
</body>
</html>

My First CSS Animation - Script Codes CSS Codes

@-webkit-keyframes square-to-circle { 0%{ border-radius: 0 0 0 0; transform: rotate(0deg); background:coral; } 25%{ border-radius: 50% 0 0 0; transform: rotate(45deg); background:darksalmon; } 50%{ border-radius: 50% 50% 0 0; transform: rotate(90deg); background:indianred; } 75%{ border-radius: 50% 50% 50% 0; transform: rotate(135deg); background:lightcoral; } 100%{ border-radius: 50%; transform: rotate(180deg); background:darksalmon; }
}
body{ margin:0; padding:0; background-color: #ccf; height: 100vh; width: 100vw;
}
.box-circle-transform{ margin:auto; width: 150px; height: 150px; background-color: #373737; outline: 1px solid transparent; -webkit-animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; -moz-animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; -ms-animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; -o-animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; position: relative; top: 50%; transform: translateY(-50%);
}
My First CSS Animation - Script Codes
My First CSS Animation - Script Codes
Home Page Home
Developer Jacob Poston
Username u1tralord
Uploaded December 27, 2022
Rating 4
Size 1,879 Kb
Views 12,144
Do you need developer help for My First CSS Animation?

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!

Jacob Poston (u1tralord) Script Codes
Name
Basic Jumbotron with Layers
Tasker Interfaces
Github Repo Breakdown
Simple Dialog
A Pen by Jacob Poston
Custom Input Form
Timeline
Database Form
Create amazing art & images 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!