Add the Ken Burns effect to slowly zoom out of background image

Add this CSS code to the custom CSS section of your theme.

@-moz-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-webkit-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-ms-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-o-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}