I would like to animate a Divi Divider. (Divi is a Builder and theme for WordPress)
So in the default CSS you find this class:
.et_pb_bottom_inside_divider{
background-size:100% 110px;
bottom:0;height:110px;
}
110px is the value, that need to be faded. When I set it to 200 it has the hight, so I am sure it is the correct class.
So what I did is I wrote some CSS and added it to the CSS of the WordPress. First you the class with adding the new animation name and details. 2nd the animation itself.
Problem: Nothing happens. When I the new height to the first class, it gets the height. So also working in general.
.et_pb_bottom_inside_divider {
animation-name: xcxcxcxc;
animation-duration: 3s;
animation-iteration-count: 3;
}
#keyframes xcxcxcxc {
0% {background-size:100% 110px!important; height:110px!important;}
100% {background-size:100% 210px!important; height:210px!important;}
}
If you have an idea let me know.
Regards C
PS: I know there are some tuts how to animate the Divi divider over the backend, but only over scroll efffect. I would need to have it animated when loaded etc.
Here a picture for better understanding. So now with 110px the optical divider is till the red arrow. With the animation I would like it to go up to something like the yellow arrow. (210px)
I got the solution.
Everything was right except the important. When removed, it worked :)
Related
So this is a bit weird. (only) In Chrome browser, when scrolling back up to the top (with two fingers rather than the sidebar), my content seems to vanish.
It becomes visible again upon scrolling back down.
I'm attaching a screenshot as some of you may not see the bug.
my website address: https://londonim.co.il
I switched to called CuteWP which is the root to all these new problems.
I suspect there is something to do with the opacity settings and animation for webkit, along with the sticky navmenu because when I inspect it on developer mode, I can see that
<div class=cutewp-scroll-top'> is getting a display:none property.
however I cannot be sure that this is the issue. My best guess lies within the styling code for the scroll bar. however this is a mere guess and fiddling with the opacity here remained fruitless.
Here's the code of my prime suspect:
/* Scroll to Top Button
-------------------------------------------------------------- */
.cutewp-scroll-top{background:#000000 left top no-repeat url(assets/images/scroll-top.png);border:1px solid black;cursor:pointer;display:block;height:29px;opacity:.4;filter:alpha(opacity=40);position:fixed;bottom:20px;right:20px;width:29px;z-index:200;}
.cutewp-scroll-top:hover{opacity:1;filter:alpha(opacity=100);-webkit-transition:opacity 1s;transition:opacity 1s;}
.cutewp-box{background:#fff;padding:15px;border:1px solid #dddddd;-webkit-box-shadow:0 0 40px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 40px rgba(0,0,0,.1) inset;box-shadow:0 0 40px rgba(0,0,0,.1) inset;}
.cutewp-animated{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
#-webkit-keyframes cutewp-fadein{from{opacity:0;}to{opacity:1;}}
#-moz-keyframes cutewp-fadein{from{opacity:0;}to{opacity:1;}}
#-o-keyframes cutewp-fadein{from{opacity:0;}to{opacity:1;}}
#keyframes cutewp-fadein{from{opacity:0;}to{opacity:1;}}
.cutewp-fadein{-webkit-animation-name:cutewp-fadein;-moz-animation-name:cutewp-fadein;-o-animation-name:cutewp-fadein;animation-name:cutewp-fadein;}
I have also noticed that when the error occures
<div class="cutewp-container cutewp-primary-menu-container clearfix cutewp-fixed"> changes to <div class="cutewp-container cutewp-primary-menu-container clearfix"> however i cannot find the command line for this change.
Would appreciate the help with this, although I realize this is a bit more vague than the way one should normally ask a question.
Thanks a lot,
Joni
This is a common issue with overflow with websites. To mitigate this kind of issue you just have to add in your custom css settings this code:
body {overflow:hidden !important;}
This will apply hiding overflow(s) to avoid unnecessary scroll tab.
I am working on this 3 panel card opening animation.. Here is an example of what I have so far.. example. This is the class that I'm applying for the second animation and transform-origin just doesn't seem to do what I think it should.. But I'm pretty new at this animation stuff.
.two-right {
transform: rotateY(170deg);
transform-origin: 100% 0;
}
As you can see the problem is that I cant get the second animation to open correctly.. On the left side it works just fine but on the right the card isn't opening correctly on the right side of the card.. Right now I'm just poking around and haven't been able to find anything. Any help would be appreciated.
Okay I found the answer to my own question.. The reason is that the flip is based on it's parent.. That's why it is rotating on the wrong axis but after it's scaled and the animation is complete it ends up being positions in the correct location.
Instead of trying to do the animations I put a timeout in the javascript to let it scale and then add the flip animation later. Here is the completed code.
Complete example
.two-right {
/* transform: rotateY(170deg); */
transform-origin: 100% 0;
}
.two-flip {
transform: rotateY(160deg);
}
I first add the .two-right class and then the .two-flip half a second later.
I'm trying to create an animated HTML/CSS banner add (HPU 300x600px max.80KB) made up of 4 images (4 stages smooth fade in transition from one to the next). To keep file size down I have made images 2, 3 & 4 partly transparent and the idea is that they fade in and overlay making the final image.
I have tried the approach in this answer: Multiple image cross fading in CSS - without (java) script but the images disappear in each transition.
I have also tried Demo 3 (Demo with Multiple Images) here: http://css3.bradshawenterprises.com/cfimg/#cfimg3 but in the first loop all 4 images are shown.
What else can I try? Thanks!
I develop banners in insane sizes too ;D
I have this example, I think is similar at yours
http://codepen.io/tarod_spj/pen/EyxVrg
In this cases I put the elements in absolute with diferents z-index like this:
.img1 {
.animationSimple(animationIn forwards #timeImg1 ease #delayImg1 1); z-index: 10;
}
.img2 {
.animationSimple(animationIn forwards #delayImg2 ease #delayImg2 1); z-index: 20;
}
All of them starts with opacity: 0;
and the first img I usually put like background of the ad.
If you can explain more what you need maybe I can help you better
I have been playing around with transitions and animations, and I wanted to make the most of using hover with them.
I was wondering if it is possible to make animation happen after being hovered over, not necessarily while hovering over it. For example, if I wanted a picture to slide in and change opacity after the related paragraph is hovered, how would I get it to stay without keeping the mouse of the section?
My last question is if something similar to keyframes can be used with transitions. I prefer transitions because they transition back to the original state instead of snapping back.
I made a jsfiddle with some basic code examples, and I am wondering how to expand upon them. Hopefully the examples help clarify what I am trying to explain.
jsfiddle
Says I need code to link jsfiddle
They are very simple, the first is just an animation (left to right) that I want to remain after hovering once.
The second is a transition (left to right), and I am wondering if I can make an animation similar to the animation that follows it (left to right to left)
I update the fiddle here
However, "left to right to left" can not accomplish through transition.
Because transition only has start status and end status, it can not handle the middle status.
Look here. https://developer.mozilla.org/en-US/docs/Web/CSS/transition
You can accomplish "left to right to left" through keyframes. For example.
#keyframes slideRight {
0% {
margin-left: 0em;
}
50% {
margin-left: 2em;
}
100% {
margin-left: 0em
}
}
Here's what I would like to do:
It's a quiz, there's a question and several answers.
The user picks 1 answer and is then shown what the correct answer is.
I would like that the correct answer button "lights up" basically, and then fades back to normal.
So I can give my element a simple style and then add a class with a white box shadow.
And I can transition between the two.
But I'd like to add the class, and then the element gets the full white box shadow, which then fades back to the normal state.
Is that possible?
You need to use #keyframes to do it in pure CSS3
#keyframes animation_name{
0% {background: color1;}
50% {background: color2;}
100% {background: color1;}
}
and for the element where you want the animation
css_selector{
animation: animation_name 5s;
animation-iteration-count:infinite;
}
and dont forget to add browser specific -moz, -webkit prefix.
Check out this Example on w3schools on CSS3 Animation
javascript apply class to element (no jquery):
document.getElementById("id").className = "newclass";
Here is a jsfiddle for you. Should do what you need - just click the black rectangle.