Animating the appearance of a title with CSS

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;}
}



HELLO JOHN !







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

The html

Hello world!

• 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;
}
Hello World!
Hello World!

StackExchange Code Review Q#145297, answer score: 2