Search code examples
csschildren

How can I keep the elements inside a div independent from it's CSS3 animations?

I have a little animated cog using CSS3, but I want the text inside it to stay still. Changing the position to absolute or fixed doesn't work, and I'm not sure how to proceed.

http://jsfiddle.net/kJf3Y/

My HTML is:

<div class="port">
<h1 class="portTitle">Test</h1>
<p id="portText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec   lectus  ipsum, pulvinar vel molestie facilisis, posuere ut lectus. Aliquam posuere turpis ac dolor dapibus sed rhoncus neque blandit. Mauris nec pellentesque mi. Aenean congue scelerisque pulvinar. Sed a velit vitae quam pulvinar pellentesque. Aliquam erat volutpat. Nullam a sapien felis, eu auctor ante. Pellentesque elementum egestas lectus, sit amet scelerisque nisl rutrum ut. Duis fermentum tortor nec neque placerat in blandit dui consequat. Suspendisse potenti. Nulla sit amet mauris vel lorem molestie fermentum.</p>
</div>

And my CSS is:

.port {
width: 330px;
height: 330px;
margin: 100px;
float: left;
background-color: #EFEFEF;
color: #000;
border-radius: 100%;
border: 15px dashed #FFFFFF;
/* box-shadow: 0 0 50px #000; */
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 30s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 30s;
-webkit-animation-name: rotate; 
-webkit-animation-duration: 30s; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate; 
-moz-animation-duration: 30s; 
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}

.portTitle {
font-size: 30px;
text-align: center;
}

.portText {
   margin: 0 auto;
}
Solution

  • I think the best solution in creating a new element inside your .port class with an absolute positioning and a negative z-index and animate just that element instead of all the entire container.

    So these are the step to follow.

    Create a new element for the animation

    <div class="port">
  <div class="port_animation"></div>
  <h1 class="portTitle">Test</h1>
  <p id="portText"></p>
</div>

    Delete animation

    Also make sure .port has a relative positioning, just to scope the absolute positioned element inside.

    .port {
  position: relative;
  width: 330px;
  height: 330px;
  margin: 100px;
  color: #000;
}

    Animate and style the new element

    The element has no height and width, because it will cover the father elements width, because of top, right, bottom and left set to zero. z-index value is for element to stay behind.

    .port_animation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #EFEFEF;
  color: #000;
  border-radius: 100%;
  border: 15px dashed #FFFFFF;
  /* And all the animation stuff also here */
}

    I updated your demo with this changes.

    jsFiddle