I would like to bring "Hello world" inside a white container from left to right but I don't want the container to move.
Need to move just text and the text flashes from left to right like a quick slider movement pleasing to the eye.
How to achieve this using CSS animation?
body {
background: red
}
.container {
background: white;
color: black;
padding: 20px;
margin: 20px;
}
<div class="container">
<h1>Hello world</h1>
</div>
for making the animation use #keyframes
and for making the text not visible if outside use overflow
forwards for saving the last keyframes of animation.
body {
background: red
}
.container {
background: white;
color: black;
padding: 20px;
margin: 20px;
}
.container {
overflow: auto; /* use "hidden" instead if it shows a unnecessary scrollbar. */
}
h1 {
animation: toRight 0.2s ease-in forwards;
transform: translateX(-50%);
}
#keyframes toRight {
100% {
transform: translateX(0);
}
}
<div class="container">
<h1>Hello world</h1>
</div>
Related
So here is my code...
I understand how to make the text disappear by making it transparent but i want it to stay gone after hovering over it so it doesnt come back - how do I accomplish this?
.disappear {
margin-top: 60px;
text-align: center;
transition: all 5s ease .3s;
font-family: Bungee Spice;
}
.disappear:hover {
color: transparent;
}
you need to use onmouseover and remove() like this
function bye() {
const dis = document.getElementById("dis");
dis.remove();
}
* {
padding: 0;
margin: 0;
/* border: 1px solid red; */
overflow-x: hidden;
}
div {
height: 50vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: xx-large;
overflow: auto;
background: lightblue;
}
<div class="div">
<h2 onmouseover="bye()" id="dis">will go on hover</h2>
</div>
I don't think it's possible to make it run smoothly with pure CSS, so far, this is what I think is close to what you want to accomplish. So before hover, the animation to make it gone is already set, but the animation is not running yet, the animation will run only if the element is hovered. The problem here is that when it's hovered then it's unhovered before it's gone, the element will be half gone as the animation is paused.
.container {
width: 100%;
height: 800px;
background: #dddddd;
}
.disappear {
margin-top: 60px;
text-align: center;
font-family: Bungee Spice;
background: yellow;
animation: example 5s linear forwards;
animation-play-state: paused;
}
.disappear:hover {
animation-play-state: running;
}
#keyframes example {
from {opacity: 1}
to {opacity: 0}
}
<div class="container">
not disappear
<div class="disappear">
DISAPPEAR
</div>
</div>
The better way would be to use javascript and use onmouseover to add the animation instead of using :hover, the difference is that when you onmouseout, the function is still executed (the animation persists). This is with JS:
function fade(elm) {
elm.style.animation = "example 5s linear forwards";
}
.container {
width: 100%;
height: 800px;
background: #dddddd;
}
.disappear {
margin-top: 60px;
text-align: center;
font-family: Bungee Spice;
background: yellow;
}
#keyframes example {
from {
opacity: 1
}
to {
opacity: 0
}
}
<div class="container">
not disappear
<div class="disappear" onmouseover="fade(this)">
DISAPPEAR
</div>
</div>
I'm trying to learn CSS animations and one thing I can't figure out and couldnt find on the web is how to set the proper duration.
I'm trying to have my website responsive therefore the font size would change depending on the size of the view. I have the following code so far:
#media screen {
.EntranceDiv{
top: 40%;
position: relative;
}
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld{
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid #D9FAFF; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .8em;
display: inline-block;
animation:
typing initial steps(30, end),
blink-caret .5s step-end infinite;
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #D9FAFF }
}
#keyframes typing {
from { width: 0 }
to { width: 65% }
}
}
My problem is that with the changes in the font size, the animation either goes for too long or for too short and then the whole thing just pops on the screen. What is a good way of setting duration for responsive animations
Your main issue here is that the width you set is relative to parent container so it has no relation with the content of your inline-block element. You need to find a way to correctly set the width of the element.
Since you cannot make a transition to width:auto, here is an idea where I duplicate the content and I use a pseudo-element with absolute position. The first content will define the width and will be hidden and the second one will be visible and I can stretch to fit the defined width using left/right properties:
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld {
letter-spacing: .8em;
display: inline-block;
position:relative;
visibility:hidden;
white-space: nowrap;
}
.helloworld:after {
content:attr(data-content);
display:block;
visibility:visible;
overflow: hidden;
white-space: nowrap;
position:absolute;
top:0;
left:0;
bottom:0;
right:100%;
border-right: .15em solid #D9FAFF;
animation: typing 2s steps(30, end) forwards, blink-caret .5s step-end infinite;
}
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: #D9FAFF
}
}
#keyframes typing {
from {
right:100%
}
to {
right: 0%
}
}
}
<h1 data-content="lorem" class="helloworld">
Lorem
</h1>
<h1 data-content="lor" class="helloworld">
Lor
</h1>
<h1 data-content="lorem ipsume" class="helloworld">
Lorem ipsume
</h1>
How can i change the size of a container on hover so that it looks like in the Picture. Is it possible with only css/Smarty?
Here is the Link to the Picture: http://www.bilder-upload.eu/upload/bc5052-1485274659.jpg
You can create that zoom effect that zooms over other elements using transform: scale(). Here's an example.
img {
max-width: 200px;
transition: transform .5s;
transform-origin: 50% 0;
background: #fff;
}
footer {
background: #111;
color: #fff;
padding: 2em 0;
}
.shirts {
text-align: center;
}
a:hover img {
transform: scale(1.2);
}
<div class="shirts">
<img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg">
<img src="https://www.customink.com/mms/images/catalog/styles/4600/catalog_detail_image_medium.jpg">
</div>
<footer>footer</footer>
So I'm learning CSS transitions and transforms and am trying to make a simple slider in CodePen. The basic idea is that I have one div on top of another and I want the first one to slide off the second when hovered on. It works fine without any overflow property, but once I added overflow: hidden to the underlying square, it pushes the overlying square down. Why is this?
http://codepen.io/johnnycopes/pen/BKReOq
--- HTML ---
<div class="container">
<div class="shape">
<div class="shape-cover">
</div>
</div>
</div>
--- CSS ---
body {
font-family: Verdana;
background: #fff0a5;
}
.container {
margin: 0 auto
}
.shape {
margin: 50px auto 0;
width: 200px;
height: 200px;
overflow: hidden;
background: #ffb03b;
}
.shape-cover {
margin: 50px auto 0;
height: 200px;
width: 200px;
background: #468966;
transform: translateX(0%);
transition: transform .5s ease-in-out;
}
.shape-cover:hover {
transform: translateX(100%);
}
It is because you are using a margin on the "overlaying square".
shape-cover is inside the shape, so the margin of the shape-cover will me relative to its parent.
So try removing the margin on the shape-cover div.
I'm implementing a toolbar using flex boxes and want optional sections to appear by smoothly sliding in from the left.
At the start, the bar should look as if the new element didn't exist, and at the end as if the animation never took place
Animating 0% { margin-left: -<width> } works exactly as intended, but only when the element's width is known at that point; I need it to work with width: auto (i.e. unset width) or other non-lengths like when flexing.
#keyframes appear {
0% { margin-left: -30ch; }
}
div.a {
width: 30ch; /* << should work without that */
flex: none; /* << stretch: should work with flex */
animation: appear 1s ease-in-out infinite alternate;
}
.root {
margin: 10px;
border: 1px solid black;
display: flex;
overflow: hidden;
}
.a, .b, .c {
box-sizing: border-box;
padding: 5px;
flex: 1;
}
.b { flex: 2 }
.a { background: #88f }
.b { background: #8d8 }
.c { background: #f88 }
<div class="root">
<div class="a">Some new stuff</div>
<div class="b">Hello</div>
<div class="c">World</div>
</div>
<div class="root">
<div class="a">Some longer content sliding in</div>
<div class="b">Hello</div>
<div class="c">World</div>
</div>
Width:auto; is not animatable. Use max-width:1000px; or something larger than the width will ever need to be. So the code would be:
width:auto;
max-width:1000px;