How to animate a rotated DOM element with CSS - css

Question

Full code is on: https://jsfiddle.net/k1t7gy8L/
I have the following HTML:
<section class="cd-intro">
<div class="cd-intro-content mask-2">
<div class="content-wrapper">
<div class="inner">
<h1>Animated Intro Section</h1>
<p>A collection of text effects for the intro section of your website</p>
<div class="action-wrapper">
Get started
Learn More
</div>
</div>
</div>
</div>
</section>
with the following CSS:
.mask-2.cd-intro-content .content-wrapper {
position: relative;
width: 100%;
max-width: 650px;
margin: 0 auto;
padding: 2em 0;
overflow: hidden;
transform:rotate(45deg);
background-color: #0F0;
}
.mask-2.cd-intro-content .content-wrapper .inner{
transform:rotate(-45deg);
background-color: #F00;
}
.mask-2.cd-intro-content .content-wrapper > div {
position: relative;
z-index: 1;
}
.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
animation-duration: 3.5s;
animation-delay: 1.1s;
animation-fill-mode: backwards;
}
.mask-2.cd-intro-content .content-wrapper {
animation-name: cd-mask-wrapper;
}
.mask-2.cd-intro-content .content-wrapper > div {
animation-name: cd-mask-content;
}
#keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes cd-mask-content {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
Everything works like a charm: Except that the rotation on transform:rotate(45deg); only takes effect AFTER the animation. Why is that? How can I rotate it prior to the animation?.
My idea idea is to reveal the content with a diagonal line instead of a vertical line.

Answer 1

You have to declare everything on transform. But also you have to note that translate will be rotated, so with the superpower of geometry you can do this:
#keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%) rotate(45deg);
-moz-transform: translateX(50%) rotate(45deg);
-ms-transform: translateX(50%) rotate(45deg);
-o-transform: translateX(50%) rotate(45deg);
transform: translateX(50%) rotate(45deg);
}
100% {
-webkit-transform: translateX(0) rotate(45deg);
-moz-transform: translateX(0) rotate(45deg);
-ms-transform: translateX(0) rotate(45deg);
-o-transform: translateX(0) rotate(45deg);
transform: translateX(0) rotate(45deg);
}
}
#keyframes cd-mask-content {
0% {
-webkit-transform: rotate(-45deg) translateX(-100%);
-moz-transform: rotate(-45deg) translateX(-100%);
-ms-transform: rotate(-45deg) translateX(-100%);
-o-transform: rotate(-45deg) translateX(-100%);
transform: rotate(-45deg) translateX(-100%);
}
100% {
-webkit-transform: rotate(-45deg) translateX(0);
-moz-transform rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
-o-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
}
Yes. IT is important to translate then rotate the wrapper. And rotate and then translate the content. Test it =)