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
Related
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 :)
I'm trying to do some nice transition either dynamically through d3 or using CSS for rects but I am having little lucky finding a good example of how to do so.
The idea is that I want to grow my bar chart from bottom to top when its being rendered.
The chart is rendered using Vega, which I don't believe has built in transitions yet, so I need other options to do outside of the library.
I attempted to use CSS animate, but it has some weird rendering issues and also goes top to bottom rather then bottom to top
rect {
animation: bar-fill 2s linear;
}
#keyframes bar-fill {
0% { height: 0; }
}
https://jsfiddle.net/zg2hnr2x/3/
Your CSS approach will currently only work in Chrome. height is not officially an attribute that can be animated with CSS (yet).
The reason that it grows from top to bottom is because the coordinate origin of SVGs is at the top-left, and so the x,y coordinate of a <rect> is also at the top left. The bottom right of a rect is at x+width,y+height.
If you need a cross-browser way to animate SVG elements then may want to look into one of the many JS SVG Animation libraries that are available.
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.
http://codepen.io/tylerkung/pen/Bukzy
I've implemented the self-correcting grid, so that when you resize the browser window, the 3 images will simply stack on top of each other.
I've also been able to make the images fade on mouseover.
But the last bit I wanted to add was to display a text on mouseover which seems tricky to me.
I'm just learning CSS so any help/articles/advice would be appreciated!
You want to change the opacity of the text when the container link is hovered so use this:
.wrapper:hover .text{
opacity: 1;
}
instead of
.text:hover{
opacity: 1;
}
See updated codepen
If you're looking for a simple tooltip, you may just add title attribute on each of the image.
I've used the div:hover CSS rule to achieve the desired affect - an image "swap" when the mouse hovers over a navigation image: www.scottmccarthydesign.com/dev.index.html
My setup here, however, is not actually a "swap." The main navigation image is a flattened jpeg of the entire desk (for faster loading), and there are empty divs over each item on the desk to map the image with links. When these empty divs are moused over, the div:hover rule fills the div with a .png that is meant to be placed precisely over the main desk image to give the effect of an image swap.
It works nicely in Firefox, but I do not understand why Safari is positioning the :hover image over the desk differently than Firefox is - each :hover image is about 1 pixel off, making it look like the seperate images on the desk are actually shifting a bit when moused over. Any suggestions??
I've had trouble using the :hover pseudo-class on elements other than <a></a>. You could use (jquery/javascript) to alter the class of the said <div> using onmouseover and onmouseout events.
With onmouseover, add a class that defines a certain background image. With onmouseout remove that class.
Even easier, use jquery .hover()
reposition your links after adding this to your css:
a div {
line-height: 0;
}
I've come across this issue before and found that it had to do with the size of the image. When the image is an odd-number pixel size on one of its dimensions, the calculations done by Firefox and Chrome/Safari (particularly when using center) are slightly different. Essentially, it has to do with sub-pixel rounding.
Simply add or subtract a pixel to your images on the axis that has an odd number length, to make them an even number (ie - instead of 100x123, make it 100x124) and you should be golden.
No need to use Javascript, this can certainly be achieved using just CSS. In my opinion, your best bet is to use the technique discussed in this article on CSS Sprites: http://www.alistapart.com/articles/sprites.
Essentially, for each item on your desk, place the hovered and non-hovered image in same image, one on top of each other, so that the top area has the non-hover state, and the bottom area has the hover state. Your code will probably look like this modified:
div#keyboard2 {
position: absolute;
left: 89px;
top: 256px;
width: 67px;
height: 160px;
background: url(../images/keyboard.png) 0 0 no-repeat;
}
#keyboard2:hover { background-position: 0 100%; }
Your desk image will then be empty, and of your items will just be on top of it.