CODEWITHSUNDEEP
ioscssreactjswebkit
ShinCat
ShinCat

Reputation: 139

webkit does not animate opacity

I spent full-day to solve this issue, however, I couldn't fix this yet. I tried to animate opacity from 0 to 1 by webkit animation for ios. however it doesn't work, and the element I applied the animation does not appear. I don't have the same issue with other devices. thank you for your help in advance.

these are solutions I tried.

  1. set visibility:visible to web-kitKeyframes
  2. change "from - to" to"0% to 100%" of web-kitKeyframes
.hello {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 5em;
    /* for iOS's opacity issue */ 
    color: white;
    opacity:0;
    -webkit-opacity: 0;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #f75998;
    animation:fadein 0.5s 0.8s forwards;
    -webkit-animation: fadein 0.5s 0.8s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.5s 0.8s forwards; /* Firefox < 16 */
    -ms-animation: fadein 0.5s 0.8s forwards; /* Internet Explorer */
    -o-animation: fadein 0.5s 0.8s forwards; /* Opera < 12.1 */
  }

  @-webkit-keyframes fadein {
    0% {
      opacity: 0;

    }
    100% {
      opacity: 1;

    }
  }

appear the element by following the animation setting.

Upvotes: 0

Views: 158

Answers (2)

Th&#233;otime
Th&#233;otime

Reputation: 17

In your animation you animate the opacity property, and don't the -webkit-opacity property. However you can try to remove all -webkit- prefixes and look in a webkit browser if it works.

Upvotes: 1

brooksrelyt
brooksrelyt

Reputation: 4025

-webkit-opacity has its fallback a plain opacity. Try modeling that with your keyframe by writing:

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Upvotes: 1

Related Questions