No se puede restringir la animación CSS en una sección o div en particular

De alguna manera no puedo hacer esta animación restringida a solo una sección particular de la página web. No quiero que se muestre en todo el fondo, solo quiero mantenerlo fijo en un div.

Aquí está el código html

Reliable

Fast

Responsive

Beautiful

bla bla bla

Merry go round

aquí está el CSS

 @import url('https://fonts.googleapis.com/css?family=Barlow'); body { background: #310404 url(http://sofes.miximages.com/animation/maxresdefault.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: 'Barlow', sans-serif; } .container { width: 100%; position: relative; overflow: hidden; } a { text-decoration: none; } h1.main, p.demos { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .sp-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); } .sp-content { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1000; } .sp-container h2 { position: absolute; top: 50%; line-height: 100px; height: 90px; margin-top: -50px; font-size: 90px; width: 100%; text-align: center; color: transparent; -webkit-animation: blurFadeInOut 3s ease-in backwards; -moz-animation: blurFadeInOut 3s ease-in backwards; -ms-animation: blurFadeInOut 3s ease-in backwards; animation: blurFadeInOut 3s ease-in backwards; } .sp-container h2.frame-1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .sp-container h2.frame-2 { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .sp-container h2.frame-3 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .sp-container h2.frame-4 { font-size: 200px; -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; } .sp-container h2.frame-5 { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span { -webkit-animation: blurFadeIn 3s ease-in 12s backwards; -moz-animation: blurFadeIn 1s ease-in 12s backwards; -ms-animation: blurFadeIn 3s ease-in 12s backwards; animation: blurFadeIn 3s ease-in 12s backwards; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span:nth-child(2) { -webkit-animation-delay: 13s; -moz-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .sp-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .sp-globe { position: absolute; width: 282px; height: 273px; left: 50%; top: 50%; margin: -137px 0 0 -141px; background: transparent url(http://sofes.miximages.com/animation/globe.png) no-repeat top left; -webkit-animation: fadeInBack 3.6s linear 14s backwards; -moz-animation: fadeInBack 3.6s linear 14s backwards; -ms-animation: fadeInBack 3.6s linear 14s backwards; animation: fadeInBack 3.6s linear 14s backwards; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); -ms-transform: scale(5); transform: scale(5); } .sp-circle-link { position: absolute; left: 50%; bottom: 100px; margin-left: -50px; text-align: center; line-height: 100px; width: 100px; height: 100px; background: #fff; color: #3f1616; font-size: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: fadeInRotate 1s linear 16s backwards; -moz-animation: fadeInRotate 1s linear 16s backwards; -ms-animation: fadeInRotate 1s linear 16s backwards; animation: fadeInRotate 1s linear 16s backwards; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .sp-circle-link:hover { background: #85373b; color: #fff; } /**/ @-webkit-keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } } @-webkit-keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } } @-webkit-keyframes fadeInBack { 0% { opacity: 0; -webkit-transform: scale(0); } 50% { opacity: 0.4; -webkit-transform: scale(2); } 100% { opacity: 0.2; -webkit-transform: scale(5); } } @-webkit-keyframes fadeInRotate { 0% { opacity: 0; -webkit-transform: scale(0) rotate(360deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); } } /**/ @-moz-keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } } @-moz-keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } } @-moz-keyframes fadeInBack { 0% { opacity: 0; -moz-transform: scale(0); } 50% { opacity: 0.4; -moz-transform: scale(2); } 100% { opacity: 0.2; -moz-transform: scale(5); } } @-moz-keyframes fadeInRotate { 0% { opacity: 0; -moz-transform: scale(0) rotate(360deg); } 100% { opacity: 1; -moz-transform: scale(1) rotate(0deg); } } /**/ @keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } } @keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } @keyframes fadeInBack { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 0.4; transform: scale(2); } 100% { opacity: 0.2; transform: scale(5); } } @keyframes fadeInRotate { 0% { opacity: 0; transform: scale(0) rotate(360deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } 

Esta animación no fue creada por mí. Sé que es algo tonto.

Está fijado a un div. Está arreglado para sp-container.

Si intenta hacer solo una sección animada, puede envolver esa sección en sp-container y eliminar sp-container del rest de su contenido. Si sp-container se utiliza para otra cosa que no sea animación, puede eliminar solo los elementos de animación de sp-container y volver a agregarlos.

 @import url('https://fonts.googleapis.com/css?family=Barlow'); body { background: #310404 url(http://sofes.miximages.com/animation/maxresdefault.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: 'Barlow', sans-serif; } .container { width: 100%; position: relative; overflow: hidden; } a { text-decoration: none; } h1.main, p.demos { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .sp-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0; background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); } .sp-content { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1000; } .sp-container h2 { position: absolute; top: 50%; line-height: 100px; height: 90px; margin-top: -50px; font-size: 90px; width: 100%; text-align: center; color: transparent; } .animation-blur { -webkit-animation: blurFadeInOut 3s ease-in backwards; -moz-animation: blurFadeInOut 3s ease-in backwards; -ms-animation: blurFadeInOut 3s ease-in backwards; animation: blurFadeInOut 3s ease-in backwards; } .sp-container h2.frame-1 { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; } .sp-container h2.frame-2 { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } .sp-container h2.frame-3 { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .sp-container h2.frame-4 { font-size: 200px; -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; } .sp-container h2.frame-5 { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span { color: transparent; text-shadow: 0px 0px 1px #fff; } .sp-container h2.frame-5 span:nth-child(2) { -webkit-animation-delay: 13s; -moz-animation-delay: 13s; -ms-animation-delay: 13s; animation-delay: 13s; } .sp-container h2.frame-5 span:nth-child(3) { -webkit-animation-delay: 14s; -moz-animation-delay: 14s; -ms-animation-delay: 14s; animation-delay: 14s; } .animation-fade { -webkit-animation: fadeInBack 3.6s linear 14s backwards; -moz-animation: fadeInBack 3.6s linear 14s backwards; -ms-animation: fadeInBack 3.6s linear 14s backwards; animation: fadeInBack 3.6s linear 14s backwards; } .sp-globe { position: absolute; width: 282px; height: 273px; left: 50%; top: 50%; margin: -137px 0 0 -141px; background: transparent url(http://sofes.miximages.com/animation/globe.png) no-repeat top left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; -webkit-transform: scale(5); -moz-transform: scale(5); -o-transform: scale(5); -ms-transform: scale(5); transform: scale(5); } .sp-circle-link { position: absolute; left: 50%; bottom: 100px; margin-left: -50px; text-align: center; line-height: 100px; width: 100px; height: 100px; background: #fff; color: #3f1616; font-size: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .sp-circle-link:hover { background: #85373b; color: #fff; } /**/ @-webkit-keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -webkit-transform: scale(0); } } @-webkit-keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -webkit-transform: scale(1.3); } 50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; -webkit-transform: scale(1.1); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -webkit-transform: scale(1); } } @-webkit-keyframes fadeInBack { 0% { opacity: 0; -webkit-transform: scale(0); } 50% { opacity: 0.4; -webkit-transform: scale(2); } 100% { opacity: 0.2; -webkit-transform: scale(5); } } @-webkit-keyframes fadeInRotate { 0% { opacity: 0; -webkit-transform: scale(0) rotate(360deg); } 100% { opacity: 1; -webkit-transform: scale(1) rotate(0deg); } } /**/ @-moz-keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; -moz-transform: scale(0); } } @-moz-keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; -moz-transform: scale(1.3); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; -moz-transform: scale(1); } } @-moz-keyframes fadeInBack { 0% { opacity: 0; -moz-transform: scale(0); } 50% { opacity: 0.4; -moz-transform: scale(2); } 100% { opacity: 0.2; -moz-transform: scale(5); } } @-moz-keyframes fadeInRotate { 0% { opacity: 0; -moz-transform: scale(0) rotate(360deg); } 100% { opacity: 1; -moz-transform: scale(1) rotate(0deg); } } /**/ @keyframes blurFadeInOut { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 20%, 75% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } 100% { opacity: 0; text-shadow: 0px 0px 50px #fff; transform: scale(0); } } @keyframes blurFadeIn { 0% { opacity: 0; text-shadow: 0px 0px 40px #fff; transform: scale(1.3); } 50% { opacity: 0.5; text-shadow: 0px 0px 10px #fff; transform: scale(1.1); } 100% { opacity: 1; text-shadow: 0px 0px 1px #fff; transform: scale(1); } } @keyframes fadeInBack { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 0.4; transform: scale(2); } 100% { opacity: 0.2; transform: scale(5); } } @keyframes fadeInRotate { 0% { opacity: 0; transform: scale(0) rotate(360deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } 

Este es su código con animación eliminada de sp-container y agregada a elementos específicos si desea animación en contenido específico que puede usar:

 

También tenga en cuenta que tiene retraso de animación en algunos elementos como h2 cuando está envuelto en sp-container. Entonces, si no vas a usar la animación con tus tags h2, te sugiero eliminar el retraso de la animación.