.no-anim .animation-wrapper {
display: none;
}
.animation-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
pointer-events: none;
width: 100%;
height: 100%;
}
.animation-wrapper__section {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.animation-wrapper__section.--first,
.animation-wrapper__section.--second,
.animation-wrapper__section.--third {
display: none;
}
@media only screen and (min-width: 1024px) {
.animation-wrapper__section.--first,
.animation-wrapper__section.--second,
.animation-wrapper__section.--third {
display: block;
}
.animation-wrapper__section.--mobile {
display: none;
}
}
.animation-section.--paw {
height: 100%;
position: absolute;
top: 65%;
left: 0;
width: 100%;
}
@media only screen and (min-width: 1024px) {
.animation-section.--paw {
top: 80%;
}
}
@media only screen and (min-width: 1600px) {
.animation-section.--paw {
top: 60%;
left: 15px;
}
}
@media only screen and (min-width: 1920px) {
.animation-section.--paw {
left: 2%;
}
}
.animation-section.--paw .image {
background-image: url('https://www.maybelline.com.mx/-/media/project/loreal/brand-sites/mny/americas/latam/products/lip-makeup/lip-color/superstay-teddy-tint/paw_pink');
width: 55px;
height: 55px;
position: relative;
background-repeat: no-repeat;
opacity: 0;
}
.animation-section.--paw .--paw-01 {
transform: rotate(-30deg);
-webkit-animation: paw_opacity 2s steps(1, end) 0.5s;
animation: paw_opacity 2s steps(1, end) 0.5s;
}
.animation-section.--paw .--paw-02 {
top: -10%;
left: 2%;
-webkit-animation: paw_opacity 2s steps(1, end) 0.5s;
animation: paw_opacity 2s steps(1, end) 0.5s;
}
.animation-section.--paw .--paw-03 {
top: -4%;
left: 6%;
transform: rotate(-15deg);
-webkit-animation: paw_opacity 2s steps(1, end) 0.75s;
animation: paw_opacity 2s steps(1, end) 0.75s;
}
.animation-section.--paw .--paw-04 {
top: -15%;
left: 7%;
-webkit-animation: paw_opacity 2s steps(1, end) 1s;
animation: paw_opacity 2s steps(1, end) 1s;
}
.animation-section.--paw .--paw-05 {
top: -8%;
left: 12%;
transform: rotate(-10deg);
-webkit-animation: paw_opacity 2s steps(1, end) 1.25s;
animation: paw_opacity 2s steps(1, end) 1.25s;
}
.animation-section.--paw .--paw-06 {
top: -17%;
left: 16%;
transform: rotate(25deg);
-webkit-animation: paw_opacity 2s steps(1, end) 1.5s;
animation: paw_opacity 2s steps(1, end) 1.5s;
}
.animation-section.--paw .--paw-07 {
top: -9%;
left: 19%;
transform: rotate(20deg);
-webkit-animation: paw_opacity 2s steps(1, end) 1.75s;
animation: paw_opacity 2s steps(1, end) 1.75s;
}
.animation-section.--paw .--paw-08 {
top: -17%;
left: 24%;
transform: rotate(45deg);
-webkit-animation: paw_opacity 2s steps(1, end) 2s;
animation: paw_opacity 2s steps(1, end) 2s;
}
.animation-section.--paw .--paw-09 {
top: -5%;
left: 25.5%;
transform: rotate(40deg);
-webkit-animation: paw_opacity 2s steps(1, end) 2.75s;
animation: paw_opacity 2s steps(1, end) 2.75s;
}
.animation-section.--paw .--paw-10 {
top: -15.5%;
left: 29.5%;
transform: rotate(45deg);
-webkit-animation: paw_opacity 2s steps(1, end) 2.75s;
animation: paw_opacity 2s steps(1, end) 2.75s;
}
.animation-wrapper__section.--second {
.animation-section.--paw .--paw-01 {
transform: rotate(30deg);
left: 32%;
top: -2%;
-webkit-animation: paw_opacity 3s steps(1, end) 3.5s;
animation: paw_opacity 3s steps(1, end) 3.5s;
}
.animation-section.--paw .--paw-02 {
transform: rotate(0deg);
left: 36%;
-webkit-animation: paw_opacity 3s steps(1, end) 3.75s;
animation: paw_opacity 3s steps(1, end) 3.75s;
}
.animation-section.--paw .--paw-03 {
top: -2%;
transform: rotate(20deg);
left: 40%;
-webkit-animation: paw_opacity 3s steps(1, end) 4s;
animation: paw_opacity 3s steps(1, end) 4s;
}
.animation-section.--paw .--paw-04 {
top: -10%;
transform: rotate(10deg);
left: 45%;
-webkit-animation: paw_opacity 3s steps(1, end) 4.25s;
animation: paw_opacity 3s steps(1, end) 4.25s;
}
.animation-section.--paw .--paw-05 {
top: -3%;
transform: rotate(10deg);
left: 50%;
-webkit-animation: paw_opacity 3s steps(1, end) 4.5s;
animation: paw_opacity 3s steps(1, end) 4.5s;
}
.animation-section.--paw .--paw-06 {
top: -12%;
transform: rotate(-20deg);
left: 55%;
-webkit-animation: paw_opacity 3s steps(1, end) 4.75s;
animation: paw_opacity 3s steps(1, end) 4.75s;
}
.animation-section.--paw .--paw-07 {
top: -3%;
transform: rotate(-10deg);
left: 60%;
-webkit-animation: paw_opacity 3s steps(1, end) 5s;
animation: paw_opacity 3s steps(1, end) 5s;
}
.animation-section.--paw .--paw-08 {
top: -9%;
transform: rotate(10deg);
left: 65%;
-webkit-animation: paw_opacity 3s steps(1, end) 5.25s;
animation: paw_opacity 3s steps(1, end) 5.25s;
}
}
.animation-wrapper__section.--third {
.animation-section.--paw .--paw-01 {
top: -6%;
transform: rotate(-20deg);
left: 70.5%;
-webkit-animation: paw_opacity 3s steps(1, end) 6s;
animation: paw_opacity 3s steps(1, end) 6s;
}
.animation-section.--paw .--paw-02 {
top: -16%;
transform: rotate(-20deg);
left: 72.5%;
-webkit-animation: paw_opacity 3s steps(1, end) 6s;
animation: paw_opacity 3s steps(1, end) 6s;
}
.animation-section.--paw .--paw-03 {
top: -10%;
transform: rotate(-20deg);
left: 78%;
-webkit-animation: paw_opacity 3s steps(1, end) 6s;
animation: paw_opacity 3s steps(1, end) 6s;
}
.animation-section.--paw .--paw-04 {
top: -20.5%;
transform: rotate(-20deg);
left: 79%;
-webkit-animation: paw_opacity 3s steps(1, end) 6.25s;
animation: paw_opacity 3s steps(1, end) 6.25s;
}
.animation-section.--paw .--paw-05 {
top: -17.5%;
transform: rotate(-20deg);
left: 85%;
-webkit-animation: paw_opacity 3s steps(1, end) 6.5s;
animation: paw_opacity 3s steps(1, end) 6.5s;
}
.animation-section.--paw .--paw-06 {
top: -25.5%;
transform: rotate(0deg);
left: 88%;
-webkit-animation: paw_opacity 3s steps(1, end) 6.75s;
animation: paw_opacity 3s steps(1, end) 6.75s;
}
.animation-section.--paw .--paw-07 {
top: -17.5%;
transform: rotate(0deg);
left: 92%;
-webkit-animation: paw_opacity 3s steps(1, end) 7s;
animation: paw_opacity 3s steps(1, end) 7s;
}
.animation-section.--paw .--paw-08 {
top: -25.5%;
transform: rotate(10deg);
left: 95%;
-webkit-animation: paw_opacity 3s steps(1, end) 7s;
animation: paw_opacity 3s steps(1, end) 7s;
}
}
.animation-wrapper__section.--mobile {
.animation-section.--paw .--paw-01 {
transform: rotate(20deg);
-webkit-animation: paw_opacity 1.25s steps(1, end) 0.5s;
animation: paw_opacity 1.25s steps(1, end) 0.5s;
}
.animation-section.--paw .--paw-02 {
transform: rotate(-20deg);
top: 6%;
left: 18%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 0.75s;
animation: paw_opacity 1.25s steps(1, end) 0.75s;
}
.animation-section.--paw .--paw-03 {
transform: rotate(20deg);
top: -2%;
left: 25%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 1s;
animation: paw_opacity 1.25s steps(1, end) 1s;
}
.animation-section.--paw .--paw-04 {
transform: rotate(-10deg);
top: 5%;
left: 45%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 1.25s;
animation: paw_opacity 1.25s steps(1, end) 1.25s;
}
.animation-section.--paw .--paw-05 {
transform: rotate(-20deg);
top: -7%;
left: 41%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 1.25s;
animation: paw_opacity 1.25s steps(1, end) 1.25s;
}
.animation-section.--paw .--paw-06 {
transform: rotate(-50deg);
top: -7%;
left: 60%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 1.5s;
animation: paw_opacity 1.25s steps(1, end) 1.5s;
}
.animation-section.--paw .--paw-07 {
transform: rotate(-40deg);
top: -16%;
left: 65%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 1.75s;
animation: paw_opacity 1.25s steps(1, end) 1.75s;
}
.animation-section.--paw .--paw-08 {
transform: rotate(-60deg);
top: -20%;
left: 82%;
-webkit-animation: paw_opacity 1s steps(1, end) 2s;
animation: paw_opacity 1s steps(1, end) 2s;
}
.animation-section.--paw .--paw-09 {
transform: rotate(-30deg);
top: -28%;
left: 76%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 2.25s;
animation: paw_opacity 1.25s steps(1, end) 2.25s;
}
.animation-section.--paw .--paw-10 {
transform: rotate(-70deg);
top: -32%;
left: 92%;
-webkit-animation: paw_opacity 1.25s steps(1, end) 2.5s;
animation: paw_opacity 1.25s steps(1, end) 2.5s;
}
.animation-section.--paw .--paw-11 {
transform: rotate(-30deg);
top: -40%;
left: 85%;
-webkit-animation: paw_opacity 1s steps(1, end) 2.75s;
animation: paw_opacity 1s steps(1, end) 2.75s;
}
}
/*animation keyframes*/
@-webkit-keyframes paw_opacity {
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.png?rev=0a0e3f9e47e2431cbfc442986738ceb5&cx=0&cy=0&cw=315&ch=315&hash=8D8BAADD076E057585333D1186E46801)
Uruguay
