3
\$\begingroup\$

To sum up my project was about making cool animation of titles appearance with an effect of a colored block coming from one side while expanding and disappearing from the others side while contracting and let the text appear.

My goal was to achieve something simple, that can be used again easily on different elements just by giving them the right classes.

I use only CSS for the animation to improve load time.

I absolutely want the animation to automatically adapt to the size of the text it contains.

Problems I encountered:

The width animation is easy from left to right but not from right to left because there's no origin define in CSS 'animation' (like in 'transform') to solve the problem I use two elements:

  • First one with position absolute, left:0
  • Second one with position absolute, right:0

Each one makes only one part of the animation. I find it a bit sad to use two elements to pretend the animation of only one element but I haven't figured out a different way of doing this.

html, body{
	margin: 0;
	padding: 0;
	min-width: 1200px; 
	width: 100%;
	height: 100%;
	background-color: #FE4D3D;
	font-family: arial;
}


#container{
	margin-left: 10px;
	display: inline-block;
}



.animated-block-from-left{
	position: absolute;
	top:0;
	left:0;
	z-index: 2;
	height: 100%;	
  	width: 0%;
  	animation: grandir 1s ease ;

}

@keyframes grandir{
	0%{width: 0%;}
	100%{width: 100%;}
}

.animated-block-from-right{
	position: absolute;
	top:0;
	right:0;
	z-index: 2;
	height: 100%;	
  	width: 0%;
  	animation: retrecir 1s 1s ease ;

}


@keyframes retrecir{
	0%{width: 100%;}
	100%{width: 0%;}
}



.yellow{
	background-color: #FFFE02;
}


h1{
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	font-size: 80px;
	color: transparent;
	animation: textappear 0.1s 1s forwards;
	z-index: 1;
}

@keyframes textappear{
	100%{color: #FFFE02;}
}
<div id='container'>

	<h1>
		HELLO JOHN !
		<div id="line" class="animated-block-from-left yellow"> </div>
		<div id="line" class="animated-block-from-right yellow"> </div>

	</h1>

</div>

\$\endgroup\$
3
  • \$\begingroup\$ Welcome to Code Review. Your question isn't clear enough. Are you looking for advises on how to improve your code or how to solve the problem you encountered. \$\endgroup\$
    – Tolani
    Oct 26, 2016 at 11:36
  • \$\begingroup\$ I'm looking for advises to how improve my code :) \$\endgroup\$ Oct 26, 2016 at 12:18
  • \$\begingroup\$ I'd change one thing: you need HTML support (two <div>s) for your CSS animation. If you really want a drop-in CSS class then required infrastructure should be at minimum. \$\endgroup\$ Oct 26, 2016 at 14:28

1 Answer 1

2
\$\begingroup\$

This can be achieved with one element and a CSS pseudo-element.

The html

<element class="animate right">Hello world!</element>
  • Add the animate class to any element that will have this animation applied to it.
  • Add a left or right class in order to specify which direction the animation should travel

The pseudo-element

.animate::before {
    content: '';
    position: absolute;
    background: #ff0;
    width: 100%;
    top: 0;
    bottom: 0;
}

The pseudo element is positioned absolute, 100% in width and stretched from top to bottom with top: 0 and bottom: 0.

There are two animations, left and right which have their own class:

.right::before {
    animation: sliderRight 2s forwards;
}

.left::before {
    animation: sliderLeft 2s forwards;
}

The animate class

Any element that you want to add this animation to will be given this class:

.animate {
    position: relative;
    color: transparent;
    padding: 10px;
    overflow: hidden;
    display: inline-block;
    margin: 20px;
    animation: textappear .1s .5s forwards;
}
  • The position: relative will make the position: absolute ::before pseudo-element child position itself relevant to the .animate parent.
  • The element must be inline otherwise the wiping animation will take the entire width of the screen (unless you use a width)
  • The overflow: hidden will cut off the animation correctly

The sliding animations

@keyframes sliderRight {
    0% {
        right: 100%; /*Push the element 100% from the right side*/
    }

    100% {
        right: -100%; /*Pull the element from left to right*/
    }
}

@keyframes sliderLeft {
    0% {
        left: 100%; /*Push the element 100% from the left side*/
    }

    100% {
        left: -100%; /*Pull the element from right to left*/
    }
}

Complete example

.animate {
  position: relative;
  color: transparent;
  padding: 10px;
  overflow: hidden;
  display: inline-block;
  margin: 20px;
  animation: textappear .1s .5s forwards;
}
.animate::before {
  content: '';
  position: absolute;
  background: #ff0;
  width: 100%;
  top: 0;
  bottom: 0;
}
.right::before {
  animation: sliderRight 2s forwards;
}
.left::before {
  animation: sliderLeft 2s forwards;
}
@keyframes textappear {
  100% {
    color: #FFFE02;
  }
}
@keyframes sliderRight {
  0% {
    right: 100%;
  }
  100% {
    right: -100%;
  }
}
@keyframes sliderLeft {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
/*Demo only*/

.animate {
  white-space: nowrap;
}
h1.animate {
  font-size: 5em;
}
body {
  margin: 0;
  padding: 0;
  background-color: #FE4D3D;
  font-family: arial;
}
<h1 class="animate right">Hello World!</h1>
<p class="animate left">Hello World!</p>

\$\endgroup\$
1
  • \$\begingroup\$ Thanks a lot mister ! Since I read a lot about this kind of animations and I also figured out that moving elements is less demanding on resource than playing with their width. \$\endgroup\$ Nov 2, 2016 at 9:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.