CSS animation syntax tests

Developer

Size

2,774 Kb

Views

38,456

CSS animation syntax tests Previews
CSS animation syntax tests HTML Codes
CSS animation syntax tests CSS Codes

How do I make an css animation syntax tests?

Testing animation syntax. What is a css animation syntax tests? How do you make a css animation syntax tests? This script and codes were developed by Acemir Sousa Mendes on 10 August 2022, Wednesday.

CSS animation syntax tests Previews

CSS animation syntax tests - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS animation syntax tests</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="test test-1"></div>
<div class="test test-2"></div>
<div class="test test-3"></div>
<div class="test test-4"></div>
<div class="test test-5"></div>
<div class="test test-6"></div>
<div class="test test-7"></div>
<div class="test test-8"></div>
</body>
</html>

CSS animation syntax tests - Script Codes CSS Codes

.test { float: left; width: 0; height: 0; margin: 1em; border-top: 3.125em solid red; border-bottom: 3.125em solid blue; border-left: 3.125em solid yellow; border-right: 3.125em solid green;
}
.test-8 { -webkit-animation: test8 2s infinite; -moz-animation: test8 2s infinite; -o-animation: test8 2s infinite; animation: test8 2s infinite;
}
.test-7 { -webkit-animation: test7 2s infinite; -moz-animation: test7 2s infinite; -o-animation: test7 2s infinite; animation: test7 2s infinite;
}
.test-6 { -webkit-animation: test6 2s infinite; -moz-animation: test6 2s infinite; -o-animation: test6 2s infinite; animation: test6 2s infinite;
}
.test-5 { -webkit-animation: test5 2s infinite; -moz-animation: test5 2s infinite; -o-animation: test5 2s infinite; animation: test5 2s infinite;
}
.test-4 { -webkit-animation: test4 2s infinite; -moz-animation: test4 2s infinite; -o-animation: test4 2s infinite; animation: test4 2s infinite;
}
.test-3 { -webkit-animation: test3 2s infinite; -moz-animation: test3 2s infinite; -o-animation: test3 2s infinite; animation: test3 2s infinite;
}
.test-2 { -webkit-animation: test2 2s infinite; -moz-animation: test2 2s infinite; -o-animation: test2 2s infinite; animation: test2 2s infinite;
}
.test-1 { -webkit-animation: test1 2s infinite; -moz-animation: test1 2s infinite; -o-animation: test1 2s infinite; animation: test1 2s infinite;
}
/* rotate3d(X,X,X,Xdeg) [BUG] */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test1{ 0%, 25% {-webkit-transform: rotate3d(0,0,1,0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,360deg);}}
@-moz-keyframes test1{ 0%, 25% {-moz-transform: rotate3d(0,0,1,0deg); } 75%, 100% {-moz-transform: rotate3d(0,0,1,360deg);}}
@-o-keyframes test1{ 0%, 25% {-o-transform: rotate3d(0,0,1,0deg); } 75%, 100% {-o-transform: rotate3d(0,0,1,360deg);}}
@keyframes test1{ 0%, 25% {-webkit-transform: rotate3d(0,0,1,0deg);-moz-transform: rotate3d(0,0,1,0deg);-ms-transform: rotate3d(0,0,1,0deg);transform: rotate3d(0,0,1,0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,360deg);-moz-transform: rotate3d(0,0,1,360deg);-ms-transform: rotate3d(0,0,1,360deg);transform: rotate3d(0,0,1,360deg);}}
[not-existing] { zoom: 1;
}
/* rotate */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test2{ 0%, 25% {-webkit-transform: rotate(0deg); } 75%, 100% {-webkit-transform: rotate(360deg);}}
@-moz-keyframes test2{ 0%, 25% {-moz-transform: rotate(0deg); } 75%, 100% {-moz-transform: rotate(360deg);}}
@-o-keyframes test2{ 0%, 25% {-o-transform: rotate(0deg); } 75%, 100% {-o-transform: rotate(360deg);}}
@keyframes test2{ 0%, 25% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg); } 75%, 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
[not-existing] { zoom: 1;
}
/* rotateZ */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test3{ 0%, 25% {-webkit-transform: rotateZ(0deg); } 75%, 100% {-webkit-transform: rotateZ(360deg);}}
@-moz-keyframes test3{ 0%, 25% {-moz-transform: rotateZ(0deg); } 75%, 100% {-moz-transform: rotateZ(360deg);}}
@-o-keyframes test3{ 0%, 25% {-o-transform: rotateZ(0deg); } 75%, 100% {-o-transform: rotateZ(360deg);}}
@keyframes test3{ 0%, 25% {-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);transform: rotateZ(0deg); } 75%, 100% {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg);}}
[not-existing] { zoom: 1;
}
/* rotate3d + rotate */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test4{ 0%, 25% {-webkit-transform: rotate3d(0deg); } 75%, 100% {-webkit-transform: rotate(360deg);}}
@-moz-keyframes test4{ 0%, 25% {-moz-transform: rotate3d(0deg); } 75%, 100% {-moz-transform: rotate(360deg);}}
@-o-keyframes test4{ 0%, 25% {-o-transform: rotate3d(0deg); } 75%, 100% {-o-transform: rotate(360deg);}}
@keyframes test4{ 0%, 25% {-webkit-transform: rotate3d(0deg);-moz-transform: rotate3d(0deg);-ms-transform: rotate3d(0deg);transform: rotate3d(0deg); } 75%, 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}
[not-existing] { zoom: 1;
}
/* rotate3d + rotateZ */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test5{ 0%, 25% {-webkit-transform: rotate3d(0deg); } 75%, 100% {-webkit-transform: rotateZ(360deg);}}
@-moz-keyframes test5{ 0%, 25% {-moz-transform: rotate3d(0deg); } 75%, 100% {-moz-transform: rotateZ(360deg);}}
@-o-keyframes test5{ 0%, 25% {-o-transform: rotate3d(0deg); } 75%, 100% {-o-transform: rotateZ(360deg);}}
@keyframes test5{ 0%, 25% {-webkit-transform: rotate3d(0deg);-moz-transform: rotate3d(0deg);-ms-transform: rotate3d(0deg);transform: rotate3d(0deg); } 75%, 100% {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg);}}
[not-existing] { zoom: 1;
}
/* rotate + rotate3d [BUG] */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test6{ 0%, 25% {-webkit-transform: rotate(0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,360deg);}}
@-moz-keyframes test6{ 0%, 25% {-moz-transform: rotate(0deg); } 75%, 100% {-moz-transform: rotate3d(0,0,1,360deg);}}
@-o-keyframes test6{ 0%, 25% {-o-transform: rotate(0deg); } 75%, 100% {-o-transform: rotate3d(0,0,1,360deg);}}
@keyframes test6{ 0%, 25% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,360deg);-moz-transform: rotate3d(0,0,1,360deg);-ms-transform: rotate3d(0,0,1,360deg);transform: rotate3d(0,0,1,360deg);}}
[not-existing] { zoom: 1;
}
/* rotateZ + rotate3d [BUG] */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test7{ 0%, 25% {-webkit-transform: rotateZ(0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,360deg)}}
@-moz-keyframes test7{ 0%, 25% {-moz-transform: rotateZ(0deg); } 75%, 100% {-moz-transform: rotate3d(0,0,1,360deg)}}
@-o-keyframes test7{ 0%, 25% {-o-transform: rotateZ(0deg); } 75%, 100% {-o-transform: rotate3d(0,0,1,360deg)}}
@keyframes test7{ 0%, 25% {-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);transform: rotateZ(0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,360deg);-moz-transform: rotate3d(0,0,1,360deg);-ms-transform: rotate3d(0,0,1,360deg);transform: rotate3d(0,0,1,360deg);}}
[not-existing] { zoom: 1;
}
/* rotate3d 180deg */
lesshat-selector { -lh-property: 0; }
@-webkit-keyframes test8{ 0%, 25% {-webkit-transform: rotate3d(0,0,1,0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,180deg)}}
@-moz-keyframes test8{ 0%, 25% {-moz-transform: rotate3d(0,0,1,0deg); } 75%, 100% {-moz-transform: rotate3d(0,0,1,180deg)}}
@-o-keyframes test8{ 0%, 25% {-o-transform: rotate3d(0,0,1,0deg); } 75%, 100% {-o-transform: rotate3d(0,0,1,180deg)}}
@keyframes test8{ 0%, 25% {-webkit-transform: rotate3d(0,0,1,0deg);-moz-transform: rotate3d(0,0,1,0deg);-ms-transform: rotate3d(0,0,1,0deg);transform: rotate3d(0,0,1,0deg); } 75%, 100% {-webkit-transform: rotate3d(0,0,1,180deg);-moz-transform: rotate3d(0,0,1,180deg);-ms-transform: rotate3d(0,0,1,180deg);transform: rotate3d(0,0,1,180deg);}}
[not-existing] { zoom: 1;
}

Home Page	Home
Developer	Acemir Sousa Mendes
Username	acemir
Uploaded	August 10, 2022
Rating	3
Size	2,774 Kb
Views	38,456

Do you need developer help for CSS animation syntax tests?

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!

Acemir Sousa Mendes (acemir) Script Codes

Name	Size
A Pen by Acemir Sousa Mendes	3,099 Kb
Clip fixed element test	2,091 Kb
Shrinking Triangles	5,097 Kb
Fading trail test with pixijs	2,447 Kb
Visual Identity Exercise	1,864 Kb
Atom	6,293 Kb
CSS Gradient hover buttons	4,217 Kb

Create amazing web 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!

Similar Scripts & Codes

Name	Username	Size
Michelle, submit your photography to Unsplash.	Zaneriley	3,368 Kb
Three js	Paulq	2,353 Kb
A Pen by Dalton Liu	Liudalton	12,437 Kb
Slide In Panel	Vikvarg	2,811 Kb
Material Design-Layout-Principles Practice	Fraina	2,331 Kb
Navcube	Wbarlow	4,775 Kb
A Pen by Kenny Mark	Kennymark	5,574 Kb
Commuter Line Tokyu 8500	Pedox	7,031 Kb
Animating characters with jQuery	042	2,776 Kb
Bootstrap 4 Gridsystem Demo	Rivella50	1,535 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!