title: My HTML CSS code doesn't work on Safari but works on all other Browsers
body: <p>I have created an animation card for my clients website, but the html css code doesn't work on safari (On Mobile) while it works on Chrome, Firefox properly. 
  I have also added -webkit-animation: for browser compatibility. It works fine on andriod browsers but in iPhone safari animation doesn't work. Below is my css code. I am not able to understand what is the issue.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="col-xs-12 col-sm-6 col-md-4 wow fadeInLeft"&gt;
  &lt;div class="service-box icon-box iconbox-theme-colored bg-white p-30 mb-30 border-1px"&gt;       
      &lt;a class="icon icon-dark border-left-theme-colored2-3px pull-left flip"&gt;
      &lt;i class="fa fa-cogs"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="icon-box-details" style="padding-top: 5px;font-family: 'VodafoneRg_0'"&gt;
      &lt;p style="font-weight: 600;font-size:20px "&gt;MIDC &lt;br&gt;Solutions&lt;/p&gt;
       &lt;/div&gt;
      &amp;nbsp;
      &lt;p style="font-size: 20px"&gt;Expertise in giving Maharashtra Industrial Development Corporation Solutions &amp; Services in relation to it.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
     .icon-box {
          margin-bottom: 30px;}
  
          .service-box {
          position: relative;
          border-bottom: 3px solid transparent;
          border-top: 0;}
  
          .icon-box.iconbox-theme-colored .icon.icon-dark {
          background-color: #ffcb05;
          color: #383431;}
  
          .icon-box.iconbox-theme-colored .icon {
          color: #002E5B;}
  
          .icon-box .icon.icon-dark {
          background-color: #111111;
          color: #fff;}
  
          .icon-box .icon {
          display: inline-block;
          height: 70px;
          margin-bottom: 0;
          -webkit-animation: all 0.3s ease;
          -moz-animation: all 0.3s ease;
          -o-animation: all 0.3s ease;
          width: 70px;
          text-align: center;}
  
          .border-left-theme-colored2-3px {
          border-left: 3px solid #005aaa !important;}
  
          .icon-box .icon i {
          line-height: 70px;}
  
          .icon-box i {
          display: inline-block;
          font-size: 40px;
          -webkit-animation: all 0.3s ease;
          -moz-animation: all 0.3s ease;
          -o-animation: all 0.3s ease;}
  
          .icon-box .icon-box-details {
          margin-left: 80px;
          font-family: 'VodafoneLt_0';
          font-size: 18px;}
  
          .service-box:after {
          background: #005aaa;}
  
          .service-box:after {
          content: "";
          height: 3px;
          position: absolute;
          left: 0;
          bottom: -3px;
          width: 0;
          -webkit-animation: all 0.3s ease;
          -moz-animation: all 0.3s ease;
          -o-animation: all 0.3s ease;
          -ms-animation: all 0.4s ease 0s;
          transition: all 0.4s ease 0s;}
  
          .service-box:hover:after {
          width: 100%;
          -webkit-animation:800ms ease all;}
  </code></pre>