Skip to content

Instantly share code, notes, and snippets.

@joellesenne

joellesenne/SVG-Animate-transition.markdown

Last active September 4, 2020 05:33
Show Gist options
  • Save joellesenne/9795410 to your computer and use it in GitHub Desktop.
Save joellesenne/9795410 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by François Lesenne.
Raw
index.html
<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><h3></h3>
</div>
</div>
</body>
Raw
script.js
// SVG animate transition :hover dashed
// inspired: https://tympanus.net/Tutorials/BorderAnimationSVG/
// Author Joël Lesenne <https://joellesenne.dev>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro:700italic);
html, body {
font-family: 'Anonymous Pro',;
font-weight: 700;
}
body {
width: 100%;
height: 100%;
margin: 20px auto;
background: #adcd37;
}
.content {
width: 200px;
height: auto;
margin: 0 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 {
width: 200px;
height: 200px;
position: relative;
background: #fa5735;
display: inline-block;
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);
}
Raw
SVG-Animate-transition.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment