1

Using the Divi Theme for Wordpress

What I'm trying to do is animated the dandelion image (see snippet). The animation works fine in IE and FireFox, but it is not working in Chrome.

The image is replacing a font-icon, which is the '7' wrapped in the span element. I initially replaced the span's content with the dandelion image, but the content URL would not show up in Firefox. I have to have the "click to scroll' text in a :before pseudo element, which is why I had to use the :after pseudo element.

I should note that I don't have the ability to manually change what is inside the span element, I have to use CSS to override it's contents.

What can I do to get the animation to work in Chrome?

Live version: http://gardenviewcare.wpengine.com/adult-day-center/ 

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:before {
  content: "click to scroll";
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  width: 80px;
  line-height: 1;
  margin-bottom: 10px;
}

span.scroll-down.et-pb-icon {
  display: none;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:after {
  content: url('http://gardenviewcare.wpengine.com/wp-content/uploads/2017/07/dandelion-icon.png') !important;
  animation: swing 15s linear infinite;
  transform: rotate(0);
  transform-style: preserve-3d;
}

@keyframes swing {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
  }
  50% {
    transform: rotateX(-15deg) rotateY(-20deg);
  }
  75% {
    transform: rotateX(15deg) rotateY(10deg) rotateZ(-15deg);
  }
  100% {
    transform: rotateX(-10deg) rotateY(-5deg);
  }
}


/** just for snippet sake so you can see the icon, as it is white **/

body {
  background: #60bb46;
}
<link href="http://gardenviewcare.wpengine.com/wp-content/themes/Divi-child-01/style.css" rel="stylesheet" />
<link href="http://gardenviewcare.wpengine.com/wp-content/themes/Divi/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="et_pb_fullwidth_header et_pb_section_parallax et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_fullwidth_header_0">

  <div class="et_pb_fullwidth_header_scroll" style="opacity: 1;"><a href="#"><span class="scroll-down et-pb-icon">7</span></a></div>
</section>
Trisha
  • 539
  • 3
  • 10
  • 30

1 Answers1

1

Add display: block to the ::after element.

The official W3 specifications defines a transformable element as:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’ [CSS21]

(Borrowed from this SO answer: https://stackoverflow.com/a/14883287/4573410)

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:before {
  content: "click to scroll";
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  width: 80px;
  line-height: 1;
  margin-bottom: 10px;
}

span.scroll-down.et-pb-icon {
  display: none;
}

.et_pb_fullwidth_header .et_pb_fullwidth_header_scroll a:after {
  content: url('http://gardenviewcare.wpengine.com/wp-content/uploads/2017/07/dandelion-icon.png') !important;
  animation: swing 15s linear infinite;
  transform: rotate(0);
  transform-style: preserve-3d;
  display: block;
}

@keyframes swing {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotateX(15deg) rotateY(15deg) rotateZ(15deg);
  }
  50% {
    transform: rotateX(-15deg) rotateY(-20deg);
  }
  75% {
    transform: rotateX(15deg) rotateY(10deg) rotateZ(-15deg);
  }
  100% {
    transform: rotateX(-10deg) rotateY(-5deg);
  }
}


/** just for snippet sake so you can see the icon, as it is white **/

body {
  background: #60bb46;
}
<section class="et_pb_fullwidth_header et_pb_section_parallax et_pb_module et_pb_bg_layout_dark et_pb_text_align_center  et_pb_fullwidth_header_0">

  <div class="et_pb_fullwidth_header_scroll" style="opacity: 1;"><a href="#"><span class="scroll-down et-pb-icon">7</span></a></div>
</section>
Jon Uleis
  • 17,693
  • 2
  • 33
  • 42