SVG Animate transition
How do I make an svg animate transition?
Animate transition :hover dashed.. What is a svg animate transition? How do you make a svg animate transition? This script and codes were developed by François Lesenne on 12 August 2022, Friday.
SVG Animate transition Previews
SVG Animate transition - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Animate transition</title> <link href='http://fonts.googleapis.com/css?family=Anonymous+Pro' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
html,
body { font-family: 'Anonymous Pro',; font-weight: 700;
}
body { width: 100%; height: 100%; margin: 20px auto; background: #adcd37;
}
.content { margin: 0 auto; width: 200px; height: auto;
}
h1 { margin:50px 0; text-align: center; font-size: 35px; color: #00353d;
}
h3 { margin : 65px 0; text-align: center; font-size: 24px; color: #00353d;
}
p { margin:50px 0; text-align: center; font-size: 15px;
}
.box { display: inline-block; position: relative; width: 200px; height: 200px; background: #fa5735; cursor: pointer; color: RGBA(47, 83, 99, 1); box-shadow: inset 0 0 0 3px RGBA(152, 87, 111, 1); -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s;
}
.box:hover { background: none; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.box svg { position: absolute;
}
.box svg line { stroke-width: 5; stroke: #FFFFFF; fill: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out;
}
.box:hover svg line { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
}
.box svg line.top,
.box svg line.bottom { stroke-dasharray: 200 200;
}
.box svg line.left,
.box svg line.right { stroke-dasharray: 200 200;
}
.box:hover svg line.top { -webkit-transform: translateX(-600px); transform: translateX(-600px);
}
.box:hover svg line.bottom { -webkit-transform: translateX(600px); transform: translateX(600px);
}
.box:hover svg line.left { -webkit-transform: translateY(600px); transform: translateY(600px);
}
.box:hover svg line.right { -webkit-transform: translateY(-600px); transform: translateY(-600px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <h1>SVG Animate</h1> <div class="content"> <div class="box"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <line class="top" x1="0" y1="0" x2="600" y2="0"/> <line class="left" x1="0" y1="200" x2="0" y2="-600"/> <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/> <line class="right" x1="200" y1="0" x2="200" y2="600"/> </svg> <h3>Transition</br>:hover dashed</3> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>SVG Animate transition - Script Codes CSS Codes
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
html,
body { font-family: 'Anonymous Pro',; font-weight: 700;
}
body { width: 100%; height: 100%; margin: 20px auto; background: #adcd37;
}
.content { margin: 0 auto; width: 200px; height: auto;
}
h1 { margin:50px 0; text-align: center; font-size: 35px; color: #00353d;
}
h3 { margin : 65px 0; text-align: center; font-size: 24px; color: #00353d;
}
p { margin:50px 0; text-align: center; font-size: 15px;
}
.box { display: inline-block; position: relative; width: 200px; height: 200px; background: #fa5735; cursor: pointer; color: RGBA(47, 83, 99, 1); box-shadow: inset 0 0 0 3px RGBA(152, 87, 111, 1); -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s;
}
.box:hover { background: none; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.box svg { position: absolute;
}
.box svg line { stroke-width: 5; stroke: #FFFFFF; fill: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out;
}
.box:hover svg line { -webkit-transition-delay: 0.1s; transition-delay: 0.1s;
}
.box svg line.top,
.box svg line.bottom { stroke-dasharray: 200 200;
}
.box svg line.left,
.box svg line.right { stroke-dasharray: 200 200;
}
.box:hover svg line.top { -webkit-transform: translateX(-600px); transform: translateX(-600px);
}
.box:hover svg line.bottom { -webkit-transform: translateX(600px); transform: translateX(600px);
}
.box:hover svg line.left { -webkit-transform: translateY(600px); transform: translateY(600px);
}
.box:hover svg line.right { -webkit-transform: translateY(-600px); transform: translateY(-600px);
}SVG Animate transition - Script Codes JS Codes
// SVG animate transition :hover dashed
// inspired: http://tympanus.net/Tutorials/BorderAnimationSVG/
// Coding by http://lesenne.fr
| Developer | François Lesenne |
| Username | francoislesenne |
| Uploaded | August 12, 2022 |
| Rating | 3 |
| Size | 3,159 Kb |
| Views | 30,360 |
Do you need developer help for SVG Animate transition?
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!
François Lesenne (francoislesenne) Script Codes
| Name | Size |
| Graph SVG | 2,537 Kb |
| Simple CSS dropdown menu | 3,451 Kb |
| Animated Pulse background svg | 56,794 Kb |
| Gallery animate transform scale3D | 3,111 Kb |
| SVG Line Animation background | 56,949 Kb |
| Change the background color of infinity | 2,017 Kb |
| Build a plan in css | 2,348 Kb |
| Animate menu transition box-shadow | 2,258 Kb |
| Animate button transform scale | 2,625 Kb |
| Hi, my first svg drawing | 11,960 Kb |
Create amazing Facebook ads 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 |
| Large canvas mousemove experiment | Jibbon | 2,885 Kb |
| Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
| Speech bubbles | Something | 1,547 Kb |
| Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| Ralph Lauren Mimic | Azureknight | 3,067 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| CSS Letter animations | Sladix | 2,116 Kb |
| SVG Basics | HipsterBrown | 1,852 Kb |
| A Pen by aaron k saunders | Aaronksaunders | 2,916 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!