CODEWITHSUNDEEP
htmlcss
redongreen
redongreen

Reputation: 107

How to transform box-shadow from left to right

How can I make it so that the box-shadow transforms from left to right without adding the transform effect to the text itself.

This text will change sizes depending on the content so the box-shadow needs to be adjusted accordingly.

Currently my code looks like this.

body {
	background-color: #FFFFFF;
	margin: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
	display: block;
	width: 85%;
	/*center vertically & horizontally*/
	position:absolute; top:50%; left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}


a, a:visited, a:hover {
	/*display: block; this makes the whole line justified*/
	-ms-text-align-last: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
	text-decoration: none;
    color: #000000;
	/*box-shadow: inset 0 -1.3vw 0 0 #00f9ff;  OLD SCRIPT*/
}    



#test1 {
    display: inline-block;
    height: auto;
    width: auto;
    visibility: visible;
    box-shadow: inset 0 -1.3vw 0 0 #00f9ff;

    font-family: "Times New Roman", Times, serif;
    text-align: center;
    line-height: 7.5vw;
    margin: 0;
    font-size: 7.7vw;
    font-weight: bold;
    animation: stretchRight;
    -webkit-animation: stretchRight;  

    animation-duration: 1s;   
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
    0% {
        transform: scaleX(0);

    }

    100% {
        transform: scaleX(1);
    }                           
}
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
			</div>
		</div>
	</body>
</html>

Upvotes: 3

Views: 3347

Answers (2)

Mihai T
Mihai T

Reputation: 17687

If you want to use animation and also the same box-shadow . Make a pseudo element with the same width,height,box-shadow as the #test1 div. Also scale it to 0 at first, and then apply the animation to it.

Using animation instead of transition will let you activate the animation on page load, not on an event like hover focus etc. Which is what i think you want

see snippet below

#test1 {
  display: inline-block;
  height: auto;
  width: auto;
  visibility: visible;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  line-height: 7.5vw;
  margin: 0;
  font-size: 7.7vw;
  font-weight: bold;
  position: relative;
}

#test1:before {
  content: "";
  box-shadow: inset 0 -1.3vw 0 0 #00f9ff;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation-name: stretchRight;
  animation-delay: 0.5s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  z-index:-1;
}

a {
  text-decoration: none;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
<div class="container">
  <div id="test1">
    <a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a>
  </div>
</div>

Upvotes: 4

David Setz
David Setz

Reputation: 200

What you want to do is use a pseudo element that you can animate. I've added the animation to the hover state for better testing

body {
	background-color: #FFFFFF;
	margin: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
	display: block;
	width: 85%;
	/*center vertically & horizontally*/
	position:absolute; top:50%; left:50%;
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}


a, a:visited, a:hover {
  position: relative;
	/*display: block; this makes the whole line justified*/
	-ms-text-align-last: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
	text-decoration: none;
    color: #000000;
}    




#test1 {
    display: inline-block;
    height: auto;
    width: auto;
    visibility: visible;

    font-family: "Times New Roman", Times, serif;
    text-align: center;
    line-height: 7.5vw;
    margin: 0;
    font-size: 7.7vw;
    font-weight: bold;
}


#test1 a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  content: "";
  background: #00f9ff;
  transition: width .2s ease-in-out;
 }
 
 #test1 a:hover:after {
  width: 100%;
 }
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<div id="test1"><a href="http://i.imgur.com/dqkgUe8.jpg">hello darkness my old</a></div>
			</div>
		</div>
	</body>
</html>

Upvotes: 7

Related Questions