Сделать родительскую анимацию не влияющей на детей

Question

Я пытаюсь заставить некоторые фигуры base-element вращаться как наложение поверх фонового изображения - однако, кажется, что вращаются и все его дочерние элементы. Есть ли способ отключить это или организовать его так, чтобы вращались только фигуры, а не каждый div?

<div class="header-image">
<div class="base-element">
<div class="header-title">Header</div>
<div class="header-paragraph">Test test test test</div>
    <div class="social-icons">
        <a href=""><i class="fa fa-facebook-square fa-2x" style="margin-right: 50px;"></i></a>
        <a href=""><i class="fa fa-twitter fa-2x" style="margin-right: 50px;"></i></a>
        <a href=""><i class="fa fa-instagram fa-2x" style="margin-right: 50px;"></i></a>
    </div>
    <div class="topnav" id="myTopnav">
        <a href="" class="active">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>                              
</div>
</div>
</div>
</div>    

.header-image
{
    background-image: url('https://i.imgur.com/im70gOL.png');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    overflow-y: hidden;
    background-attachment: fixed;
}

.base-element
{
    background-image: url('https://i.imgur.com/i6Lreuj.png');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    overflow-y: hidden;
    background-attachment: fixed;
    animation: rotation 3s infinite linear;
  }

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.header-paragraph
{
    position: absolute;
    color: #ffffff;
    font-size: calc(9.8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 21%;
    text-align:center;
}

.header-title
{
    position: absolute;
    color: #ffffff;
    font-family: sansa_bold;
    font-size: calc(32px + (120 - 20) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 10%;
    text-align:center;
}

.topnav 
{
    display: flex;
    list-style-type: none;
    padding-left: 20%;
    padding-top: 1.8%;
    background-color: #33333300;
    margin-bottom: 25%;
    z-index: 100;
}

.topnav a 
{
  color: #f2f2f2;
  text-align: center;
  padding: 1% 1.5%;
  text-decoration: none;
  font-size: calc(6px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(0.5em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
  display: flex;
   opacity: 60%;
   -webkit-opacity: 0.6;
   -moz-opacity: 0.6;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    z-index: 100;
}

.topnav a:hover
{
    color: #ffffff;
    text-decoration: none;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav a.active 
{
    z-index: 3;
    color: #ffffff;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav .icon 
{
  display: none;
  position: absolute;
}

Кодовая ссылка:

https://codepen.io/adms2000/pen/poJjmxX

Answer 1

Поскольку по некоторым причинам вы не смогли добавить вращение к пустому div, есть только один способ удалить его из родительских элементов другого div и сделать его еще одним div
Но есть вещь Я только что добавил  , чтобы в div было содержимое, но пользователь его не видит.

.header-image
{
    background-image: url('https://i.imgur.com/im70gOL.png');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    overflow-y: hidden;
    background-attachment: fixed;
}
.base-element
{
    background-image: url('https://i.imgur.com/i6Lreuj.png');
    background-repeat: no-repeat;
    background-size: cover;
    animation: rotation 3s infinite linear;
    width:100vw;
    height:200px;
  }

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.header-paragraph
{
    position: absolute;
    color: #ffffff;
    font-size: calc(9.8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 21%;
    text-align:center;
}

.header-title
{
    position: absolute;
    color: #ffffff;
    font-family: sansa_bold;
    font-size: calc(32px + (120 - 20) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 10%;
    text-align:center;
}

.topnav 
{
    display: flex;
    list-style-type: none;
    padding-left: 20%;
    padding-top: 1.8%;
    background-color: #33333300;
    margin-bottom: 25%;
    z-index: 100;
}

.topnav a 
{
  color: #f2f2f2;
  text-align: center;
  padding: 1% 1.5%;
  text-decoration: none;
  font-size: calc(6px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(0.5em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
  display: flex;
   opacity: 60%;
   -webkit-opacity: 0.6;
   -moz-opacity: 0.6;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    z-index: 100;
}

.topnav a:hover
{
    color: #ffffff;
    text-decoration: none;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav a.active 
{
    z-index: 3;
    color: #ffffff;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav .icon 
{
  display: none;
  position: absolute;
}

<div class="header-image">

<div class="header-title">Header</div>
<div class="header-paragraph">Test test test test</div>
    <div class="social-icons">
        <a href=""><i class="fa fa-facebook-square fa-2x" style="margin-right: 50px;"></i></a>
        <a href=""><i class="fa fa-twitter fa-2x" style="margin-right: 50px;"></i></a>
        <a href=""><i class="fa fa-instagram fa-2x" style="margin-right: 50px;"></i></a>
    </div>
    <div class="topnav" id="myTopnav">
        <a href="" class="active">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>                              
</div>
</div>
<div class="base-element">
&nbsp;
</div>

Answer 2

Вы можете использовать псевдоэлемент . Установите фоновое изображение и анимацию для псевдоэлемента. Модификация кода html не требуется.

.header-image
{
    background-image: url('https://i.imgur.com/im70gOL.png');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    overflow-y: hidden;
    background-attachment: fixed;
}

.base-element
{
    position: relative; /*set position*/
    overflow: hidden;
    overflow-y: hidden;
}

.base-element::before{
  content:'';
  /*set position to absolute, 
  in order to position this element*/
  position:absolute; 
  top:0;
  left:0;
  width: 100%;
  height:100%;
  /*background properties here*/
  background-image: url('https://i.imgur.com/i6Lreuj.png');
  background-repeat: no-repeat;
  background-size: 100%;
  animation: rotation 3s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.header-paragraph
{
    position: absolute;
    color: #ffffff;
    font-size: calc(9.8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 21%;
    text-align:center;
}

.header-title
{
    position: absolute;
    color: #ffffff;
    font-family: sansa_bold;
    font-size: calc(32px + (120 - 20) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 10%;
    text-align:center;
}

.topnav 
{
    display: flex;
    list-style-type: none;
    padding-left: 20%;
    padding-top: 1.8%;
    background-color: #33333300;
    margin-bottom: 25%;
    z-index: 100;
}

.topnav a 
{
  color: #f2f2f2;
  text-align: center;
  padding: 1% 1.5%;
  text-decoration: none;
  font-size: calc(6px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(0.5em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
  display: flex;
   opacity: 60%;
   -webkit-opacity: 0.6;
   -moz-opacity: 0.6;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    z-index: 100;
}

.topnav a:hover
{
    color: #ffffff;
    text-decoration: none;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav a.active 
{
    z-index: 3;
    color: #ffffff;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav .icon 
{
  display: none;
  position: absolute;
}

<div class="header-image">
  <div class="base-element">
    <div class="header-title">Header</div>
    <div class="header-paragraph">Test test test test</div>
        <div class="social-icons">
            <a href=""><i class="fa fa-facebook-square fa-2x" style="margin-right: 50px;"></i></a>
            <a href=""><i class="fa fa-twitter fa-2x" style="margin-right: 50px;"></i></a>
            <a href=""><i class="fa fa-instagram fa-2x" style="margin-right: 50px;"></i></a>
        </div>
        <div class="topnav" id="myTopnav">
            <a href="" class="active">Test</a>
            <a href="">Test</a>
            <a href="">Test</a>
            <a href="">Test</a>
            <a href="">Test</a>
            <a href="">Test</a>
            <a href="">Test</a>                              
      </div>
    </div>
  </div>
</div>    

Answer 3

Один из способов сделать это - поместить все элементы заголовка, кроме "base-element", за пределы элемента header-image.

HTML:

<div class="header-title">Header</div>
<div class="header-paragraph">Test test test test</div>
    <div class="social-icons">
        <a href=""><i class="fa fa-facebook-square fa-2x" style="margin-right: 50px;"></i></a>
        <a href=""><i class="fa fa-twitter fa-2x" style="margin-right: 50px;"></i></a>
        <a href=""><i class="fa fa-instagram fa-2x" style="margin-right: 50px;"></i></a>
    </div>
    <div class="topnav" id="myTopnav">
        <a href="" class="active">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>
        <a href="">Test</a>                              
</div>
<div class="header-image">
<div class="base-element">
</div>
</div> 

CSS:

.header-image
{
    background-image: url('https://i.imgur.com/im70gOL.png');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    overflow-y: hidden;
    background-attachment: fixed;
      width: 100%;
    height: 550px;
}

.base-element
{
    background-image: url('https://i.imgur.com/i6Lreuj.png');
    background-repeat: no-repeat;
    background-size: 100%;
    overflow: hidden;
    overflow-y: hidden;
    background-attachment: fixed;
    animation: rotation 3s infinite linear;
    width: 100%;
    height: 100%;
  }

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.header-paragraph
{
    position: absolute;
    color: #ffffff;
    font-size: calc(9.8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 21%;
    text-align:center;
}

.header-title
{
    position: absolute;
    color: #ffffff;
    font-family: sansa_bold;
    font-size: calc(32px + (120 - 20) * ((100vw - 300px) / (1600 - 300)));
    width:100%;
    padding-top: 10%;
    text-align:center;
}

.topnav 
{
    display: flex;
    list-style-type: none;
    padding-left: 20%;
    padding-top: 1.8%;
    background-color: #33333300;
    margin-bottom: 25%;
    z-index: 100;
    position: absolute;
}

.topnav a 
{
  color: #f2f2f2;
  text-align: center;
  padding: 1% 1.5%;
  text-decoration: none;
  font-size: calc(6px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(0.5em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
  display: flex;
   opacity: 60%;
   -webkit-opacity: 0.6;
   -moz-opacity: 0.6;
    transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
    z-index: 100;
}

.topnav a:hover
{
    color: #ffffff;
    text-decoration: none;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav a.active 
{
    z-index: 3;
    color: #ffffff;
    border-bottom: white solid 4px;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
}

.topnav .icon 
{
  display: none;
  position: absolute;
}

Здесь - это правка вашего кодового маркера.

РЕДАКТИРОВАТЬ: Размещена неверная ссылка на ручке.