Complete css animation on hover

Question

I have a css button animation where is circles a line around the button and what i want is when you hover over it it will stop the end point but continue the beginning point until it reaches the end.

<a href="#" class="animation purple center-block">About Us</a>
<style>
@keyframes electronic {

0%, 100% {
    background-position: 20px -30px;
}
25% {
    background-position: 150px 5px;
}
50% {
    background-position: 20px 40px;
}
75% {
    background-position: -100px 5px;
}
}
</style>

Here is a js fiddle: https://jsfiddle.net/Lypuc0hn/

EDIT: Sorry question is a bit unclear but i will elaborate.

Currently the line goes around the circle but what i want is so when you hover over it it will keep going until the button has a complete border.

So basicly 1 point of the line will stop while the other keeps going until it make an entire border

So what do you want exactly? Your question isn't clear enough. — Edric
– Edric, Commented Nov 8, 2017 at 4:22

dansch · Accepted Answer · 2017-11-08 05:05:43Z

3

You could use svg to trace around a rectangle.

I added a little code to your fiddle, but you likely have a lot more svg to learn if you go this route!

https://jsfiddle.net/Lypuc0hn/7/

<svg>
   <rect stroke='purple' stroke-width=1 
     x=5 y=5 width=50 height=50 
     stroke-dasharray="100,0" pathlength='100' />
</svg>

and some css to animate it

@keyframes dasharray {

    0%, 100% {
        stroke-dasharray: 100,0;
    }

    50% {
        stroke-dasharray: 0,100;
    }


}

svg rect {
    animation: dasharray 2s infinite linear;
}

Stroke dasharray is a set of values that represent a border, dark space and white space. By having 0 dark space and 100 white space, that means its all blank. We can animate up to 100 dark space and 0 white space.

Path length limits this array to one sum. If you had a path length of 1000, you would see more of a dashed border that fills up(try it out, it also looks neat!).

You could also play with stroke-dashoffset, so that it would fill up, but also be moving around as it did.

Here's an example with the above mentioned changes ( different path length and added dashoffset) https://jsfiddle.net/Lypuc0hn/8/

Have fun!

EDIT: Here's a version that reacts to hover

https://jsfiddle.net/Lypuc0hn/11/

EDIT 2: This reacts to hover and has About Us text

https://jsfiddle.net/Lypuc0hn/12/

edited Nov 8, 2017 at 5:05

answered Nov 8, 2017 at 4:46

dansch

6,2674 gold badges49 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThatPurpleGuy Over a year ago

how would you put the svg around text

dansch Over a year ago

you can put a <text>some text</text> inside of the svg element. Updated answer and here jsfiddle.net/Lypuc0hn/12

ankita patel · Accepted Answer · 2017-11-08 05:15:45Z

Try this.

@font-face {
    font-family: "open";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
body{
    background-color: black;
    color: white;
    font-weight: 500;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.header{
    margin-top: 15vh;
    margin-bottom: 10vh;
}
img{
    width:auto;
    height: 100%;
}

a {
    display: block;
    margin: 10px;

    text-decoration: none;
    color: inherit;
}
a.pink:hover{
     text-decoration: none;
     color: #ffffff;
     /*background-color: #EA238D;*/


 }
a.green:hover{
    text-decoration: none;
    color: #47ea2f;

}
a.blue:hover{
    text-decoration: none;
    color: #0920a8;

}
a.purple:hover{
    text-decoration: none;
    color: #67008e;

}
.animation {
    width: 200px;
    padding: 20px;
    text-align: center;
    position: relative;
    background: #000000;
    color: #fff;
    font: 13px open, tahoma;
}
.animation svg {
  height: 58px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.animation rect {
  fill: none;
  stroke: #e9b667;
  stroke-dasharray: 110, 130;
  stroke-dashoffset: 3;
  stroke-width: 4;
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.animation:hover rect {
  stroke-dasharray: 422, 0;
  stroke-width: 4;
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="animation purple">
  About Us
  <svg>
    <rect x="0" y="0" fill="none" width="100%" height="100%"/>
  </svg>
</a>

This doesn't solve OP's problem. Read the latest edit if you haven't already.

Collectives™ on Stack Overflow

Complete css animation on hover

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related