Currently, I am working on the following CSS:
figure p {
opacity:0;
}
figure:hover p {
opacity:1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform:translateY(100%);
-webkit-transform:translateY(100%);
transform:translateY(100%);
/* Apply animation to this element */
-moz-animation: scroll-up 5s linear infinite;
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
0% {
-moz-transform: translateY(100%); /* Browser bug fix */
-webkit-transform: translateY(100%); /* Browser bug fix */
transform: translateY(100%);
}
100% {
-moz-transform: translateY(-100%); /* Browser bug fix */
-webkit-transform: translateY(-100%); /* Browser bug fix */
transform: translateY(-100%);
}
}
Even though the scrolling effect of the text works smoothly, I am encountering difficulty in achieving a gradual opacity transition. Despite adding the necessary code snippet to the hover state as shown above, the outcome is not meeting my expectations. Instead of a gradual change in opacity, the text simply appears abruptly. This is disappointing because my objective was to create a dynamic opacity effect where the higher the text scrolls, the more transparent it becomes. Ideally, when it reaches the peak of the vertical scroll (bottom to top motion), it should be completely transparent (0 opacity). Since I'm struggling with a basic opacity transition implementation, I am hesitant about creating a complex one.
Query: Given my current vertical scroll style, is there a way to achieve the desired opacity transition effect?