Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS keyframe animation not working in Chrome

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #252772
    greeh house
    Participant

    This is my first attempt at animation. After much fiddling, I was able to get this to work as I wanted. However, it’s not working in chrome. Please take a look: http://html.myplumbingshowroom.com/DPS/DPS-home.html

    Here is my css: http://codepen.io/greenhousegraphix/pen/KWvXjx

    Your comments are appreciated.

    #252774
    Paulie_D
    Member

    A Codepen is of little value if it does not demonstrate the issue.

    Perhaps add some appropriate HTML.

    Help us, help you.

    #252776
    Shikkediel
    Participant

    I’m not able to figure it out myself because of the sliding action… trying to inspect the element makes it soon disappear again. All I’ve seen so far is that it seems to be related to the caption being positioned out of sight (below).

    #252796
    greeh house
    Participant

    Hi Paulie,

    I added the HTML, CSS, and JS. This is the CSS I’m looking to troubleshoot:

    .caption-wrapper {
    -webkit-animation: slidein 9s;
    -moz-animation: slidein 9s;
    -ms-animation: slidein 9s;
    -o-animation: slidein 9s;
    animation: slidein 9s;
    }
    @-moz-keyframes slidein {
    0% {position: relative;top: 50%;transform: translateY(0%);}
    10% {position: relative;top: 100%;transform: translateY(50%);}
    100% {position: relative;top: 100%;transform: translateY(50%);}
    }
    @-webkit-keyframes slidein {
    0% {position: relative;top: 50%;transform: translateY(0%);}
    10% {position: relative;top: 100%;transform: translateY(50%);}
    100% {position: relative;top: 100%;transform: translateY(50%);}
    }
    @-o-keyframes slidein {
    0% {position: relative;top: 50%;transform: translateY(0%);}
    10% {position: relative;top: 100%;transform: translateY(50%);}
    100% {position: relative;top: 100%;transform: translateY(50%);}
    }
    @-ms-keyframes slidein {
    0% {position: relative;top: 50%;transform: translateY(0%);}
    10% {position: relative;top: 100%;transform: translateY(50%);}
    100% {position: relative;top: 100%;transform: translateY(50%);}
    }
    @keyframes slidein {
    0% {position: relative;top: 50%;transform: translateY(0%);}
    10% {position: relative;top: 100%;transform: translateY(50%);}
    100% {position: relative;top: 100%;transform: translateY(50%);}
    }

    #252805
    PearlFleetwood
    Participant

    Hello dear, i think you need to apply the vendor prefix on both the style property, and keyframes function.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.