- This topic is empty.
-
AuthorPosts
-
March 14, 2017 at 10:58 am #252772greeh houseParticipant
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.
March 14, 2017 at 2:23 pm #252774Paulie_DMemberA Codepen is of little value if it does not demonstrate the issue.
Perhaps add some appropriate HTML.
Help us, help you.
March 14, 2017 at 2:48 pm #252776ShikkedielParticipantI’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).
March 15, 2017 at 6:46 am #252796greeh houseParticipantHi 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%);}
}March 15, 2017 at 8:30 am #252805PearlFleetwoodParticipantHello dear, i think you need to apply the vendor prefix on both the style property, and keyframes function.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.