I've got text that 'appears' slowly thanks to a ::before element and a transition. The box created by the ::before code covers the text and the transition makes the box than move horizontally, creating the illusion that the text behind it is appearing in real time. Here's the code:
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
p {
font-size: 90px;
}
.test {
position: relative;
}
.test2::before {
content: '';
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
animation: test;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-origin: right;
}
#keyframes test {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
<p class="test test2">
TEST
</p>
Code works perfect, but here's the problem. The background has to be the same colour of the box that moved horizontally. I want to have a picture in the background, but now the box that moves horizontally (and it white) is visible. If I make the box opacity 0 or have no background, then it doesn't cover the text anymore. Any way around this?
I am trying to create a curtain effect on some text. I want the text to be hidden at first and then have an animated reveal from the middle of the text to the outer edges. I want this to work even if there is an odd number of letters. In other words, breaking up the string would not work. If there is only one giant character in the string I want it to reveal from the center of the character to the outer edges of the character. I do not want a curtain effect on the background, since I don't know what I want to have for a background yet. I want it only on the text.
Here is what I have so far:
HTML
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
CSS
body {
margin: 0;
}
.container {
position: relative;
font-size: 3vh;
width: 100%;
height: 100vh;
background: lightblue;
}
.my-name {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
font-weight: bold;
color: darkblue;
width: 0;
overflow: hidden;
white-space: nowrap;
animation: showName 5s linear 3s forwards;
}
#keyframes showName {
from {
width: 0;
}
to {
width: 15ch;
}
}
The overflow:hidden and the width from 0 to 100 give me what I want in terms of the individual characters gradually being revealed instead of popping in like a typewriter. The problem is that it generates from the left to the right. Is there any way I can start expanding the width from the middle to the outer edges?
Firstly, you would need a keyframe to auto width which you can't do. I'd suggest rethinking your methodology.
I'd go with animating a clip path
body {
margin: 0;
}
.container {
position: relative;
font-size: 25vh;
width: 100%;
height: 100vh;
background: lightblue;
display:flex;
justify-content:center;
align-items:center;
}
.my-name {
font-weight: bold;
color: white;
overflow: hidden;
padding: .25em;
background: rebeccapurple;
clip-path: inset(0 100% 0 100%);
animation: showName 5s linear forwards;
}
#keyframes showName {
0% {
clip-path: inset(0 100% 0 100%);
}
100% {
clip-path: inset(0);
}
}
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
I have a container of variable height, and would like to put an element at the middle of it. So I've set these styles:
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Which work in most cases. However, the container's height is not only variable, but it also changes constantly.
Because of this, that code won't work. An example:
#keyframes changeSize {
0% {
height: 100px;
}
50% {
height: 150px;
}
100% {
height: 100px;
}
}
#parent {
position: relative;
width: 400px;
height: 300px;
background: red;
animation-name: changeSize;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#child {
position: absolute;
margin-block-start: 0;
margin-block-end: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
<div id="parent">
<p id="child">I should not be moving...</p>
</div>
As you can see, it's moving. So, my question is, is there a way to place it in the middle of the element (vertically) but without having it move if the container changes size - just with CSS?
The issue is that percentage measure units are relative to the containing element. Since the #parent is changing in height through the animation, the value of a percentage unit changes. The unit change affects the percentage height property applied to the #child. The work-around might be some very complicated CSS (might not work in every situation) so the best solution is to use JavaScript to capture the initial 50% height in pixels so the unit no longer changes. It is important to also use a resize event listener to apply a new 50% height should the browser window be resized.
window.addEventListener('load',resizeDiv());
window.addEventListener('resize',resizeDiv());
function resizeDiv(){
var initialHeight = document.getElementById('parent').offsetHeight/2;
document.getElementById('child').style.top = initialHeight+'px';
}
#keyframes changeSize {
0% {
height: 100px;
}
50% {
height: 150px;
}
100% {
height: 100px;
}
}
#parent {
position: relative;
width: 400px;
height: 300px;
background: red;
animation-name: changeSize;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#child {
position: absolute;
margin-block-start: 0;
margin-block-end: 0;
right: 0;
}
<div id="parent">
<p id="child">Hey!! I'm not moving anymore!</p>
</div>
Is it possible to have a body background image aligned to the edge of a container element?
Using boostrap 3, I want a background to the page that is fixed to a container edge, so when resizing, the background moves with the container (ie, in the example below, the background image centered over the container edge):
(source: nfx.nz)
Is this possible with a background image, or would I have to add a new absolutely positioned layer / or javascript...?
There are several solutions to your question, and it really depends on if you require dynamic sizing of the background. The example I have shown will animate the container dynamically, so you can see how it works.
Approach No. 1: Offset background position with known value
One is if you know the exact dimensions of the image, then you can simply position it negatively along the x-axis (i.e. moving it to the left) by half the width of the image. This is assuming that you are not dynamically sizing your background image:
* {
margin: 0;
padding: 0;
}
div {
background-color: steelblue;
background-image: url('http://placehold.it/400x200');
background-repeat: no-repeat;
background-position: -200px 0;
width: 50%;
margin: 0 auto;
height: 500px;
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes pulse {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
<div>
Background image dimension: 400x200
</div>
Approach No. 2: Use pseudo/dummy element
If your background size is dynamic (i.e. changes with the size of the container), you are better off using an absolutely positioned pseudo-element or a dummy element:
* {
margin: 0;
padding: 0;
}
div {
background-color: steelblue;
width: 50%;
margin: 0 auto;
height: 500px;
animation-name: pulse;
animation-duration: 3s;
animation-iteration-count: infinite;
position: relative;
overflow: hidden;
}
div::before {
background-image: url('http://placehold.it/400x200');
background-repeat: no-repeat;
background-size: 100%;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -50%;
right: 50%;
}
div > * {
position: relative;
}
#keyframes pulse {
0% {
width: 50%;
}
50% {
width: 100%;
}
100% {
width: 50%;
}
}
<div>
<p>Background image dimension: 400x200</p>
</div>
All,
I'd like to be able to use translateX to animate a child element 100% of the way across it's parent (i.e., from the left edge to the right edge).
The challenge is that percentages in translateX refer to the element itself, not the parent.
So, for example, if my html looks like this:
<div id="parent">
<div id="child">
</div>
And my CSS like this (vendor-prefixes omitted):
#parent {
position: relative;
width: 300px;
height: 100px;
background-color: black;
}
#child {
position: absolute;
width: 20px;
height: 100px;
background-color:red;
transform: translateX(100%);
}
This doesn't work - the child only moves 20px (100% of itself), not all the way across the parent. (You can see this on jsfiddle):
I can do this:
#child {
position: absolute;
width: 20px;
height: 100px;
background-color:red;
-webkit-transform: translateX(300px) translateX(-100%);
transform: translateX(300px) translateX(-100%);
}
This works (seen here again on jsfiddle), because it first moves the child 300px (the full width of the parent), minus 20px (the width of the child). However, this depends on the parent having a fixed, known pixel dimension.
However, in my responsive design - I don't know the width of the parent, and it will change.
I know that I can use left:0 and right:0, but the animation performance of left/right is much worse than translateX (Thanks Paul Irish!).
Is there a way to do this?
Thanks in advance.
I didn't post my idea originally, because it involves creating an additional HTML layer, and expected better solutions to come.
Since that hasn't happened, I explain my comment. What I meant was this:
#parent {
position: relative;
width: 300px;
height: 100px;
background-color: black;
}
#wrapper {
position: absolute;
width: 100%;
height: 100px;
border: solid 1px green;
transition: all 1s;
}
#wrapper:hover {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#child {
position: absolute;
width: 20px;
height: 100px;
background-color:red;
}
#wrapper:hover #child {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
Since the wrapper is 100% width of the parent, translating it 100% works as expected.
fiddle
Note that the wrapper is being translated 100% as you stated. However, seems that what you really want is to move the element 100% - width. To achieve this, you have to translate the child also 100% (now this applies to the child width) in the opposite direction.
Correction: the child should share the transition property of the wrapper:
#parent {
position: relative;
width: 300px;
height: 100px;
background-color: black;
}
#wrapper {
position: absolute;
width: 100%;
height: 100px;
border: solid 1px green;
transition: all 5s;
}
#wrapper:hover {
transform: translateX(100%);
}
#child {
position: absolute;
width: 50px;
height: 100px;
background-color:red;
transition: inherit;
}
#wrapper:hover #child {
transform: translateX(-100%);
}
<div id="parent">
<div id="wrapper">
<div id="child"></div>
</div>
</div>
There's a pretty cool solution to this problem using Flexbox. The key is to take advantage of the flex-grow property.
Say you have some HTML that looks like this:
<div class="flex-container">
<div class="flex-spacer"></div>
<div class="slider"></div>
</div>
First, give .flex-container the basic display: flex property, and set its flex-direction to row. Set the positioning of the child elements to relative, so they will sit next to each other inside .flex-container.
By default, the flex-grow property is set to 0, which is exactly what we want at the beginning. This means that .flex-spacer and .slider will only have their normal dimensions to begin with. We simply keep .flex-spacer empty, and it will have a width of 0.
Now for the animation. We only need two CSS rules to make it work: add a transition to .flex-spacer and set flex-grow to 1 on .flex-spacer during some event. The second rule gives all of the unused width inside .flex-container to the width of .flex-spacer, and the first rule animates the change in width. The .slider element gets pushed along to the edge of .flex-container.
The CSS looks something like this - I added a background to .flex-spacer to make its presence a little more obvious, and set flex-grow to 1 when the user hovers over .flex-container:
body * {
box-sizing: border-box;
}
.flex-container {
cursor: pointer;
display: flex;
flex-flow: row nowrap;
width: 100%;
border: 2px solid #444;
border-radius: 3px;
}
.flex-spacer,
.slider {
flex-grow: 0;
position: relative;
}
.slider {
padding: 25px;
background-color: #0DD;
}
.flex-spacer {
background-color: #DDD;
transition: all .4s ease-out;
}
.flex-container:hover .flex-spacer {
flex-grow: 1;
}
<div class="flex-container">
<div class="flex-spacer"></div>
<div class="slider"></div>
</div>
Flexbox makes this pretty configurable, too. For example, say we want .slider to move from right to left, instead. All we have to do is switch the flex-direction property in .flex-container to row-reverse, and we're done!
Feel free to play with it in this pen.
Keep in mind that things can get a little trickier if we want animations for different types of events. For example, I came across this issue when trying to animate a label when a user types in an input element. A little more HTML and CSS is needed to make it work (I used some JS, as well), but the concept is the same.
Here's another pen, this time in the context of a form with input.
With the recent addition of Size Container Queries it is now possible to do this by setting the container-type property to inline-size in the parent and then translating the child element by 100cqw - 100% where 100cqw is the full width of the parent and 100% is the width of the child.
#parent {
position: relative;
width: 300px;
height: 100px;
background-color: black;
container-type: inline-size;
}
#child {
position: absolute;
width: 20px;
height: 100px;
background-color:red;
transform: translateX(calc(100cqw - 100%));
}
<div id="parent">
<div id="child">
</div>
I implemented this using wrapper and flex-grow:1.
Here are two animations at the same time with the same duration: 1) the container (green) moves with the car at 100% of the parent's width; 2) the car moves back -100% of its width (to stay on the track at the finish line). The duration can be taken separately and distributed to the container (.track-inner) and the car (.car)
const goBtn = document.querySelector('.go');
const inner = document.querySelector('.track-inner');
const car = document.querySelector('.car');
const durationFromServerMS = '3000ms';
goBtn.addEventListener('click', ()=>{
inner.classList.add('drive');
inner.style.animationDuration = durationFromServerMS;
car.classList.add('backShift');
car.style.animationDuration = durationFromServerMS;
})
const backBtn = document.querySelector('.back');
backBtn.addEventListener('click', ()=>{
inner.classList.remove('drive');
car.classList.remove('backShift');
})
html, body {
padding: 2rem;
}
.track{
width: 50%;
display:flex;
position: relative;
background-color: gray;
width: auto;
margin-bottom: 1rem;
border: 5px dashed blue;
overflow:hidden;
}
.track-inner{
width: 100%;
border: 5px dotted green;
}
.car{
width: 3rem;
height: 1.5rem;
border: 1px solid black;
background-color: salmon;
}
.finish-line{
position:absolute;
top:0;
right: 0.5rem;
width: 3rem;
height: 1.5rem;
border-left: 6px dotted yellow;
}
button{
padding: 0.5rem 1rem;
background-color: lightblue;
outline: none;
border:none;
margin: 0.2rem
}
button:hover{
pointer:cursor;
background-color: salmon;
}
.backShift {
animation-name: car-back;
/* animation-duration: 5s; */
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
.drive {
animation-name: driving;
/* animation-duration: 5s; */
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
#keyframes driving {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
#keyframes car-back {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
p{
padding:0;
}
<div class="track">
<div class="track-inner">
<div class="car ">car</div>
</div>
<div class="finish-line">finish</div>
</div>
<div>
<button class='go'>Go</button>
<button class='back'>Back</button>
</div>