body[data-animation="on"] main img {
    transform: scale(0);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transition: 1s;
}

body[data-animation="on"] main img.animated {
    transform: scale(1);
    filter: blur(0);
    -webkit-filter: blur(0);
    transition: 1s;
} 

body[data-animation="on"] main h1, body[data-animation="on"] main h2, body[data-animation="on"] main h3, body[data-animation="on"] main h4, body[data-animation="on"] main h5, body[data-animation="on"] main h6 {
    transform: translateX(-50px);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transition: .5s;
}

body[data-animation="on"] main p, body[data-animation="on"] main li {
    transform: translateX(50px);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    transition: .5s;
}

body[data-animation="on"] h1.animated, 
body[data-animation="on"] h2.animated,
body[data-animation="on"] h3.animated,
body[data-animation="on"] h4.animated,
body[data-animation="on"] h5.animated,
body[data-animation="on"] h6.animated,
body[data-animation="on"] p.animated,
body[data-animation="on"] li.animated{
    transform: translateX(0);
    filter: blur(0px);
    -webkit-filter: blur(0px);
    transition: .5s;
}