Svg animation test

Developer
Anthony
Size
2,338 Kb
Views
12,144
  1. Svg animation test Previews
  2. Svg animation test HTML Codes
  3. Svg animation test CSS Codes

How do I make an svg animation test?

Svg animation test, css only. What is a svg animation test? How do you make a svg animation test? This script and codes were developed by Anthony on 04 January 2023, Wednesday.

Svg animation test Previews
IQ Test

Svg animation test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Svg animation test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="95.62px" height="98.28px" viewBox="0 0 95.62 98.28" style="enable-background:new 0 0 95.62 98.28;" xml:space="preserve" >
<g class="m"> <path d="M86.66,0h8.96v98.28c-8.54,0-17.08,0-25.62,0V54.6L49.14,76.44h-2.8L25.62,54.6v43.68c-8.54,0-17.08,0-25.62,0V0h9.24 L47.6,42.56L86.66,0z"/>
</g>
<g class="m2"> <path class="path" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M83.58,88.62V23.66h-1.96L47.6,59.5L14,23.66h-1.82V88.62h1.4V25.48L47.6,61.6l34.58-36.12v63.14H83.58z"/>
</g>
</svg>
</body>
</html>

Svg animation test - Script Codes CSS Codes

@-webkit-keyframes dash { from { stroke-dashoffset: 460.945251464; } to { stroke-dashoffset: 230.472625732; }
}
@-moz-keyframes dash { from { stroke-dashoffset: 460.945251464; } to { stroke-dashoffset: 230.472625732; }
}
@keyframes dash { from { stroke-dashoffset: 460.945251464; } to { stroke-dashoffset: 230.472625732; }
}
@-webkit-keyframes white { to { stroke: white; }
}
@-moz-keyframes white { to { stroke: white; }
}
@keyframes white { to { stroke: white; }
}
@-webkit-keyframes first { from { opacity: 0; } to { opacity: 1; }
}
@-moz-keyframes first { from { opacity: 0; } to { opacity: 1; }
}
@keyframes first { from { opacity: 0; } to { opacity: 1; }
}
.m { opacity: 0; -webkit-animation: first 1s linear 1.4s 1; -moz-animation: first 1s linear 1.4s 1; animation: first 1s linear 1.4s 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.path { stroke-dasharray: 460.945251464; stroke-dashoffset: 460.945251464; -webkit-animation: dash 1s linear 1, white 0.5s ease-out 1.2s 1; -moz-animation: dash 1s linear 1, white 0.5s ease-out 1.2s 1; animation: dash 1s linear 1, white 0.5s ease-out 1.2s 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
Svg animation test - Script Codes
Svg animation test - Script Codes
Home Page Home
Developer Anthony
Username Tonours
Uploaded January 04, 2023
Rating 3
Size 2,338 Kb
Views 12,144
Do you need developer help for Svg animation test?

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!

Anthony (Tonours) Script Codes
Name
Remember MSN Wizz
SVG fill animation
Send button effect
Simple form input effect
Button hover
A Pen by Anthony
Background Animation
Fail vibration
Bender edit profile
Create amazing captions 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!