Image Example for Reference
Making a website and really getting into CSS3 animations for the first time. Ideally, I want those two gray borders animating outwards from the logo in the center. I currently have them animating but they only animate left to right. They are done by having a div on both sides with a border-bottom. Because of this, I thought animating the div's width from 0 to 100 was the best approach. It's working great... just not in the right direction lol.
Note: the CSS is in stylus so there isn't normal syntax.
Animation Keyframes:
#keyframes widthExpand {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Assigning Class:
.fadewidth
animation-name widthExpand, fadeIn
animation-duration 2000ms, 2000ms
transition-timing-function ease-in
animation-direction normal
I've tried different animation directions and having the 0% start at width 100% then reversing it, hoping it would fix it. Always animates left to right no matter what I do.
It's also position horizontally centered with flexbox. Here's the HTML:
<div id="centernav" class="">
<div class="left-links">
<div class="top-links fadewidth">
</div>
<div class="bottom-links">
</div>
</div>
<img src="assets/images/cv-logo-yellow-nodate.svg" id="cvlogo-main" class="fadeindown">
<div class="right-links">
<div class="top-links fadewidth">
</div>
<div class="bottom-links">
</div>
</div>
</div>
CSS: Stylus
.left-links,
.right-links
width 30%
.top-links
border-bottom 1px solid #fafafa
#centernav
display flex
align-items center
justify-content center
flex-direction row
height 85%
color nardo
& h1
font-family heading
color gold
font-size 6.5rem
font-weight 100
margin-bottom -22px
& img
margin 0 50px
I feel like this is probably something really simple I'm missing in maybe the keyframe declaration. Thanks for your help!
Figured it out. Since they are positioned center, the animation will force outwards if you give them an absolute position. I gave the parent div a relative position and the inner divs an absolute position.
Note: you have to give it an absolute position within the keyframe declaration. I tried applying an absolute position in the CSS for the class but it created a weird effect once the animation sequence was done.
I simply did the following:
#keyframes widthExpand {
from {
width: 0%;
position: absolute;
}
to {
width: 100%;
position: absolute;
}
}
Related
What I mean by responsive is that the gradient transition of the background would be always at the height of a select transparent element, because it would be a design feature to have the gradient transition in the background of the transparent element.
If I view this codepen snippet in chrome code inspector and emulate a view in a different resolution, the transition would be below or above the transparent element.
How do I get the transition exactly under the transparent element on all resolutions without changing the positioning unit type of the transparent element?
I tried to use also % for the gradient stop, but it won't be responsive.
I used a heading as a transparent element for the sake of simplicity, but it's a flexbox row actually, just below the website header and above the page content, so changing the positioning units of that row it seems impossible.
h1 {
padding-top: 35px;
padding-left: 50%;
font-size: 10vh;
color: #00000020;
}
div {
height: 700px;
background: linear-gradient(to bottom, #f19585, #f19585 20vh, #f9e314 26vh, #f9e314 60vh, #9a080f 61vh, #9a080f);
}
<div>
<h1>Hello</h1>
</div>
(codepen)
I have successfully animated a div using #keyframes but I need to alter properties of child elements of that div at the same time. Is there a way to address a child element from within a keyframe?
HTML
<div class="layoutBlocks" id="layoutBlock1">
<div class="Wrappers">
<div class="transparentBG"> <!--semi=transparent underlay-->
</div>
</div>
<div class="Wrappers">
<div class="articles" id="article1">
<table>
<tr><th>heading</th></tr>
<tr><td>article</td></tr>
</table>
</div>
</div>
CSS
#layoutBlock1 {
left: 0%;
top: 0%;
width: 49.75%;
height: 49.25%;
-webkit-animation: LlB1 1s;
animation: LlB1 1s;
}
#-webkit-keyframes LlB1 {
0% {width:50%; height:50%; z-index: 1;}
100% {width:100%; height:100%; z-index: 100;}
}
#keyframes LlB1 {
0% {width:50; height:50%; z-index: 1;}
100% {width:100%; height:100%; z-index: 100;}
}
(All the extra wrappers are to make the semi-transparent background and rounded corners work on Android.)
(I think transforms might be easier than keyframes here but my ultimate goal is to add a few more effects down the line.)
As my keyframe moves & resizes the layoutBlock1 div, I want to make the semi-transparent underlay opaque, but since it's a child element, I can't figure out how to address it. Is this possible?
Addressing the child node from the keyframe is not possible.
But, there might be a few hacks:
Having another animation with the same duration, but with animation and settings for the child node
Another way to achieve this is to use some of the JS libraries for animation. Eg.: https://animejs.com
You cannot change a child element from within a keyframe unless that keyframe has been called on the element. You could have another animation going on, and you could assign that to the child element and set it to have the same duration.
If you want the same animation to happen to the child element, you could just call the keyframe on the child element.
In a page I work on I have a div that contains an animation with changing images (with CSS) and below it is a wrapper div for the content, like that:
<div id="animation">
<img ...>
...
<img ...>
</div>
<div id="content">
Some content
</div>
I've tried different methods: floats, clear, position, but I cannot make the content div to stay where it should, below the animation div - it overlaps it. The only solutions I found to partially work are to give the first div the height of the images (they all have equal width and height), but when I do that it breaks on different resolutions, or to give the images height of 100% and apply the above, but then the images look incredibly ugly on different resolutions.
How can I achieve my goal, preferably using CSS only?
Edit: JSFiddle
Edit 2: I used this tutorial for the changing images.
the problem is that you have all the content in the top div as position:absolute. That way, the top div doesn't know how high it needs to be (i.e. it will be 0px high).
So the solution is to have one img not positioned; then the div is as high as this img and the content div will move down below it.
#cf4a img {
position: absolute;
left:0; top:0;
width: 100%;
}
#cf4a img:first-child { /* one non-positioned child */
position: static;
}
Updated fiddle
I need to allocate some background image to a certain div, the thing is it needs to be positioned from right and not the usual left in CSS. So when defining background-position, it can read, say , right, or some big percentage (which is also calculated from the left side of the screen but anyway works) and.. that's it. I cannot use pixels and get it to go with a fix distance from the right side of its container. Am I right here? So, is there a work-around for this? Anything to do with LESS if that helps? Theoretically, I can have it set to right and somehow decrease a couple of pixels then.
We have margin-right:+-px, padding-right:+px, but not background-position-right:+-px ?
background-position: right 20px;
https://developer.mozilla.org/en-US/docs/CSS/background-position
JSBIN example: http://jsbin.com/ixejey/1/
UPDATE:
Oops, I may have misunderstood the question. The above positions the background image to the right side and 20px from the top--but not a set distance away from the right side. I don't think you can do that at this time with CSS alone.
For now what you could do is instead of using a background image on the element directly, wrap the element inside a wrapper div, then add a second div to hold the "background" image and position it absolutely--which you can do from the right a specific distance.
Example of the alternative option:
<div id="yourContainer">
<div id="yourBackGroundImage"></div>
<div id="yourContent">your content</div>
</div>
css:
#yourContainer {
position: relative;
}
#yourBackGroundImage {
width: 100;
height: 100;
position: absolute;
right: 50px;
}
The first value (calc(100% - 0%)) is the horizontal position and the second value (calc(100% - 10%)) is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
<div id="hero-content"></div>
CSS
#hero-content{
background-position:
calc(100% - 0%) /* 0px from the right */
calc(100% - 10%) /* 10% from the bottom */
}
<div id="background"></div>
and
#b {
height:100%;
width:100%;
background: ; //put background style here
}
I'm trying to create images that will drop out in any direction when hovered over, using just HTML and CSS.
What it's meant to look like:
not hovered over: a section of the image is displayed
hover: the remaining section of the image slides out (in a CSS specified direction)
What I've tried doing:
a <div> to hold a background-image that cuts off at a certain height and slides out using css animations on hover
<html>
<body>
<style>
#-webkit-keyframes resize {
0% {
}
100% {
height: 446px;
}
}
#pic {
height: 85px;
width: 500px;
background-image: url(http://images5.fanpop.com/image/photos/31400000/Cow-cows-31450227-500-446.jpg);
}
#pic:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0.5s;
-webkit-animation-direction: normal;
-webkit-animation-fill-mode: forwards;
}
</style>
<div id="pic"></div>
<p class="center">Hover over me</p>
</body>
</html>
The problem with this approach is that this moves other content out of the way which I don't want.
This approach also doesn't work if I want to slide the image to the left or the right or upwards.
Any suggestions?
I put your code on fiddle an worked out a few examples for you:
move down: http://jsfiddle.net/rcCeP/
move up: http://jsfiddle.net/rcCeP/1/
move right: http://jsfiddle.net/rcCeP/2/
move left: http://jsfiddle.net/rcCeP/3/
for fun:
from center: http://jsfiddle.net/rcCeP/4/
in the document flow: http://jsfiddle.net/rcCeP/5/ (note the xtra wrapper with relative positioning)
how i would do it, with transitions in stead of animations, to work in two directions and degrade gracefully on older browsers: http://jsfiddle.net/rcCeP/6/
I could keep going on like this all day, this is real fun...
The key to prevent the content from getting pushed is making the picture position absolute. This will lift it out of the flow of the document. Then the direction just becomes a matter of playing around with the position and backround-position values.
Hope this helps!