Disable CSS Animation on Pseudo Element Inherited from Parent

Disable CSS animation on pseudo element inherited from parent

As the pseudo-element is a child element of the parent it will continue to get rotated as long as parent has the animation. Even setting animation: none on the pseudo element will have no effect.

The only way to make it look as though the child has no animation is to reverse the effect like shown in below snippet. What is being done is that the very same animation is added to the pseudo element but the animation-direction is set as reverse. This means that the pseudo get the exact reverse transform effect and thus would retain it in the same position.

.spinner {  height: 50px;  width: 50px;  position: relative;  animation: rotation .6s infinite linear;  border-left: 6px solid #222;  border-right: 6px solid #222;  border-bottom: 6px solid #222;  border-top: 6px solid #ccc;  border-radius: 100%;}.spinner:after {  position: absolute;  content: 'Loading..';  top: 0px;  left: 0px;  height: 100%;  width: 100%;  animation: rotation .6s infinite linear reverse; /* added this line */}@keyframes rotation {  from {    transform: rotate(0deg);  }  to {    transform: rotate(359deg);  }}

<div class='spinner'></div>

How to disable animation in a specific element in CSS

Change the following in your html

<div id="container">    

<div id="main">
  <div id="outer-circle">
    <div id="inner-circle">
      <div id="center-circle">
      </div>
    </div>
  </div>
   <div id="content"><p>text</p></div>
</div>

Add/change the following in your css

#main{
    position:relative;
}
#content{
    right: 0;
    left: 0;
    top: 59px;
    margin: auto;
}

How to get the text to be fixed inside the animating div?

The issue is you are animating the entire <div> so no matter what you do, the text and all children inside that div will inherit that transform. You need to break it up.

You can separate the text and the dial into their own elements and put it in a container element and then apply the transform to only the dial. This way only the dial is moving and nothing else. If you set the container to have position: relative you can then absolute position elements within that container to your desire.

You can see it done here or if you prefer jsFiddle.

body{  background-color: #ADEAFF;  padding:10%;}
.container {  position: relative;}
.text {  position: absolute;  top: 90px;  left: 90px;  z-index: 2;}
.dial {  width: 200px;  height: 200px;  background-color: #eff0f2;  border-radius:50% 50% 50% 0;  box-shadow: 2px 3px 8px #aaa, inset 5px 3px 8px #fff;  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  }
@keyframes square-to-circle {  0%  {    transform:rotate(0deg);  }  5%  {    transform:rotate(10deg);  }  10%  {    transform:rotate(20deg);  }  15%  {     transform:rotate(30deg);  }  20% {      transform:rotate(40deg);  }   25% {      transform:rotate(50deg);  }     30% {      transform:rotate(60deg);  }     35% {      transform:rotate(70deg);  }     40% {      transform:rotate(80deg);  }     45% {      transform:rotate(90deg);  }     50% {      transform:rotate(100deg);  }     55% {      transform:rotate(110deg);  }     60% {      transform:rotate(120deg);  }     65% {      transform:rotate(130deg);  }     70% {      transform:rotate(140deg);  }     75% {      transform:rotate(150deg);  }     80% {      transform:rotate(160deg);  }     85% {      transform:rotate(170deg);  }     90% {      transform:rotate(180deg);  }     95% {      transform:rotate(190deg);  }     100% {      transform:rotate(200deg);  }  }

<body><div class="container">  <span class="text">Home</span>  <div class="dial"></div></div></body>

Why does transition-delay not work on a child element when parent is shown?

I got a bit confused with exactly when the settings would occur given the display:none starting condition on the parent.

This snippet takes a slightly different path - using a CSS animation which I found easier to control. The animation is not set up until the parent is displayed so there is no room for confusion on timing.

$('button.show').on('click', () => {
  $('.parent').addClass('in');
});

$('button.hide').on('click', () => {
  $('.parent').removeClass('in');
});

.parent,
.child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent {
  background-color: orange;
  width: 300px;
  height: 300px;
}

.child {
  background-color: green;
  padding: 20px;
  width: 150px;
  height: 150px;
  animation-name: none;
}

.parent:not(.in) {
  display: none;
}

.parent.in .child {
  animation-name: change;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

@keyframes change {
  0% {
    background-color: green;
  }
  100% {
    background-color: white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <span>Background should start green, then turn white, but transition isn't happening.</span>
  </div>
</div>

<br>
<button type="button" class="show">Show parent</button>
<button type="button" class="hide">Hide parent</button>

Prevent children from inheriting rotate transformation in CSS

I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.

This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:

.parent {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 70px;
}

.child1 {
  background-color: yellow;
  width: 200px;
  height: 150px;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.child2 {
  position: absolute;
  top: 30px;
  left: 50px;
  background-color: green;
  width: 70px;
  height: 50px;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Style child element when hover on parent

Yes, you can definitely do this. Just use something like

.parent:hover .child {
   /* ... */
}

According to this page it's supported by all major browsers.

How to apply child:hover but not parent:hover

So this is REALLY ugly, but it works (kind of). I'm basically creating a duplicate of parent as a sibling of child. parent-overwrite is hidden by default, then displayed on the hover of child. Chrome doesn't like it unless you use the + selector instead of the ~ selector. This isn't very scalable, but it may work.

As the other guys posted, javascript would likely be a better solution.

 <style>  .parent { padding: 100px; width: 400px; height:400px; position: relative; z-index: 998; }  .parent:hover { background-color: green; }  .child { padding: 100px; width: 200px; height:200px; position: relative; z-index: 1000; }  .child:hover { background-color: blue; }  .parent-overwrite { padding: inherit; width: inherit; height: inherit; position: absolute; top: 0; left: 0; z-index: 999; background-color: #FFF; display: none; }  .child:hover ~ .parent-overwrite { display: block; }</style>
<div class="parent">    <div class="child">Child</div>    <div class="parent-overwrite"></div></div>

Parent Div = Float Left. Child Div Not Displaying Text

You have font-size: 0 in .roster so it makes inherit to all childrens. Reset your code as this:

.roster > div {
     font-size: 1rem; 
}

See it working:

https://jsfiddle.net/8fx9f6xb/1/

Disable CSS Animation on Pseudo Element Inherited from Parent