Help with CSS is possible

Support
#1

Hello dear Themeco Team, first, MERRY CHRISTMAS and the best for the next Year.
I am planing to buy the unlimited package of Pro, thank you for that opportunity.
My question is;
I am making a CSS zoomIn effect in a page, unfortunately I am not such a great expert in CSS, good but still learning. Dodie’s Page
The image disappear at the end of the effect, if I take out the first three lines from zoom: 1.5;, then, the page load with the image, then it does the effect. What I want to do is that the page is empty, the image zoomIn and stay.
Thank you in advanced for your valuable help.
this is my CSS
“.e5-2 .x-image {
zoom: 1.5;
-moz-transform: (scale 1.5);
opacity: 0;
border: 2px solid #000;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
animation: zoomIn;
animation-delay: 1s;
animation-duration: 1.5s;”

#2

Hi @bogarguz,

Thanks for reaching out.

The reason why your image is not displaying at the end of the animation because the opacity was set to 0. I suggest that you will set keyframes when starting the opacity is 0 then at the end, the opacity is 1.

Please check these CSS tricks with keyframes:

Hope that helps.

Thank you.

#3

Hello Marc,
I did change the CSS like this;

.e5-2 .x-image {
border: 2px solid #000;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
animation: zoomIn;
animation-delay: 1s;
animation-duration: 1.5s;
}
@keyframes zoomInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Still, there is the blinking and the image at the beginning.
How can I have the page blank at the beginning?

#4

I did it Marc,

This is the code;

.e5-2 .x-image {
border: 2px solid #000;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
animation: zoomIn;
animation-delay: 1s;
animation-duration: 1.5s;
animation-fill-mode: both;
}
@keyframes zoomInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

it was missing the animation-fill-mode

Thank you and Merry Christmas.

#5

Hello @bogarguz,

You are inserting an incorrect class. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Therefore, your code should be:

.e5-4.x-image{
    border: 2px solid #000;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
    animation: zoomInAnimation;
    animation-delay: 1s;
    animation-duration: 1.5s;
}

@keyframes zoomInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

If you have added the code as an inline element CSS, it is best that you use this code:

$el.x-image {
   /* your styling here */
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer. You will be the one to maintain this code when there are theme and plugin updates to prevent any conflicts and issues in the future.

Best Regards.

#6

Thank you Ruenel, nice talking to you again. MERRY CHRISTMAS.
Your suggestion and code makes sense, thank you.
I already realized that I miss one important line, the animation-fill-mode.
After I added it, it works as expected. I tried with the class e5-4, but unfortunately it didn’t work, I have to go up to the Grid, e5-2.
the $el .x-image makes sense, I didn;t use it, but i will try in order to clean more my CSS and to learn little nuances.
Thank you again, as well to Marc,
Have a great new year.

#7

You are most welcome @bogarguz as always.
Merry Christmas to you and your family too!!!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.