This question already has answers here:
Transition background-color via slide animation
(2 answers)
Closed 3 years ago.
I'd like to make a div's (just containing text) background slide in from left to right, how can i accomplish this?
I can make it fade in using css transition but cannot figure out how to make it slide in.
.container{
display:inline;
padding:10px;
transition: background-color 2s;
}
.container:hover{
background-color:lightcoral;
}
<div class='container'>
some text here
</div>
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
#rect {
animation-name: slide;
animation-duration: 4s;
}
#keyframes slide {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 50px;
}
}
</style>
<div id="rect"></div>
You can try using a keyframes animation like this one. Adapted from: https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-movement-using-css-animation
Related
How can I animate this div element so it starts at the top and ends at the bottom and then disappears something like a shooting star effect?
Currently, this code is going from top to bottom but it returns from bottom to top(I do not want this effect), I will like to start always from top all the way to the bottom, any suggestion?
css
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: relative;
animation: animateDiv 1s infinite;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 50px; }
}
html
<!DOCTYPE html>
<html>
<head>
<body>
<div>
<div class="St"></div>
</div>
</body>
</html>
You should probably use animation-fill-mode:forwards which will end at the last frame. But you also need to better define your keyframes (add 100%), and finally it suits your case better to use position:fixed instead of relative.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
div {
width: 100px;
height: 100px;
background: blue;
}
.St {
width: 5px;
height: 100px;
background: green;
position: fixed;
animation: animateDiv 1s forwards;
}
#keyframes animateDiv {
0% {top:0;}
100%{top:100%}
}
<div>
<div class="St"></div>
</div>
I have spend hours trying to find a solution that just requires css to work. I am trying to animate a div when it is hoverd, that its height and width be reduced uniformly.
<div class="a"></div>
Above is a simple div element with the following css:
.a {
width: 350px;
height: 350px;
background: #000;
margin: 100px 0 0 400px;
transition: all 2s linear;
position:fixed;
}
I want to reduce the height and width of the element on hover from the center using just css.
Use scale transformation:
.a {
width: 350px;
height: 350px;
background: #000;
margin: 10px;
transition: all 2s linear;
position: fixed;
}
.a:hover {
transform:scale(0.5);
}
<div class="a"></div>
The function you are looking for is scale()
As per your requirement, ideally what you would want to do is to fire the scale() function on hover of the target element as:
.a {
width: 350px;
height: 350px;
background: #000;
margin: 10px;
transition: all 2s linear;
position: fixed;
}
.a:hover {
transform:scale(0.7);
}
This css function will zoom the div element with respect to its center. See this for a complete reference.
Use the :hover pseudoclass.
.a:hover {
width: 300px;
height: 300px;
}
The transition on .a will apply as expected.
This question already has an answer here:
left-right movement.. css only very generic
(1 answer)
Closed 4 years ago.
I have the following HTML:
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: auto;
display: inline-block;
line-height: 32px;
}
<div class="container">
<div class="box">HELLO</div>
</div>
I want to animate the div from right to left in only CSS. The issue is that the inner box has a variant width (due to translations).
If I could do an animation similar to
from {
right: 0;
}
to {
left: 0;
}
it would be exactly what I need, but unfortunately this doesn't work.
How can I animate the inner div with a variant width from left to right using only CSS. The outer div also has a variant width.
Edit:
I would like the inner div to never move outside the outer div.
This is not a duplicate because the inner AND outer container have a variant/unknown width.
You can do this by starting with right:100% and finish to right:0%
EDIT
I've achieve this by using 2 different methods :
by changing the right property and with using a calc() to prevent to box to go outside your container
Use a wrapper who have the width of your container minus the width of your box and use translateX property for your animation.
.container{
background-color:#ccc;
width:400px;
position:relative;
height:50px;
}
.big{
width:600px;
}
.test1 .box{
position:absolute;
width:100px;
height:100%;
right:calc(100% - 100px);
background-color:red;
animation:to-right-1 1s linear forwards;
}
.test2 .wrapper{
position:relative;
width:calc(100% - 100px);
height:100%;
animation:to-right-2 1s linear forwards;
}
.test2 .box{
width:100px;
height:100%;
background-color:red;
}
#keyframes to-right-1{
from{
right:calc(100% - 100px);;
}
to{
right:0px;
}
}
#keyframes to-right-2{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
<div class="test1">
<div class="container">
<div class="box">Hello</div>
</div>
<div class="container big">
<div class="box">Hello</div>
</div>
</div>
<div class="test2">
<div class="container">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
<div class="container big">
<div class="wrapper"><div class="box">Hello</div></div>
</div>
</div>
After you define left and right in class.
transition-property: right, left;
transition-duration: 2s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s;
right can be done like
right:calc(100% - 400px)
and use this to make it bigger as you go.
#-webkit-keyframes big {
from { -webkit-transform: scale(.1,.1); }
to { -webkit-transform: scale(1,1); }
}
#keyframes big {
from { transform: scale(.1,.1); }
to { transform: scale(1,1); }
Use this fiddle as reference http://jsfiddle.net/MiKr13/aL7t2jvr/
}
You can use keyframes animation to animate'em.
.container {
width: auto;
height: 32px;
background-color: gray;
display: inline-block;
padding: 4px 8px;
min-width: 400px;
position: absolute;
}
.box {
padding: 0 6px;
height: 100%;
left: 0;
background-color: red;
width: 50px;
display: inline-block;
line-height: 32px;
}
.navr{position:absolute; z-index:55; text-align:center; margin:0 auto; bottom:0%; cursor:pointer;}
.navr {
-webkit-animation-name: bump;
-webkit-animation-duration: 0.3s;
-webkit-animation-iteration-count: 1;
animation-name: bump;
animation-duration: 2s;
animation-iteration-count: 1;
position:absolute;
left:0;
}
#keyframes bump {
0% {right:-100%;}
100% {right:85%;}
}
<div class="container">
<div class="box navr">HELLO</div>
</div>
If you use variant width you can use the element's width to position them.
Here the class .animated has a width of 50px; so we can move it's postion from left:100% to left:50px instead of giving left:0
because the element .animate has the absolute position. That's why we are giving it's width as position here.
.container {
position: relative;
width: 80%;
height: 50px;
border: 1px solid black;
}
.animated {
position: absolute;
width: 50px;
height: 100%;
background-color: red;
animation: .5s linear 0s slide 1;
}
#keyframes slide {
from { left: 100%; }
to {
left: 50px;
transform: translateX(-100%);
}
}
<div class=container>
<div class=animated>hello
</div></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I found a nice codepen and started playing with it:
http://codepen.io/georgehastings/full/xgwxgo
The problem is that I can't seem to make the black background-color of my div appear so that the glowing stays BEHIND the div and not ontop of it.
My current situation:
http://codepen.io/anon/pen/xgavRb
What have I done wrong ?
I am looking for an effect similar to this:
http://assets.razerzone.com/eeimages/products/25594/firefly-cloth-tech-bg.jpg
You need to use another element instead of the :after, see this as an example:
body {
background: black;
}
.homeTitle {
z-index: 14;
position: relative;
text-align: center;
color: #252B37;
background-color: black;
color: white;
font-size: 50px;
margin-top: 20vh;
width: 100px;
margin-bottom: 7vh;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: gamers;
border-radius: 20px;
/* animation: textColor 10s ease infinite;*/
}
.homeTitleBack {
position: absolute;
content: "";
left: 40%;
top: 17px;
z-index: -1;
height: 47%;
width: 20%;
margin: auto;
transform: scale(0.75);
-webkit-filter: blur(5vw);
-moz-filter: blur(5vw);
-ms-filter: blur(5vw);
filter: blur(5vw);
background-size: 200% 200%;
animation: animateGlowing 10s ease infinite;
}
#keyframes animateGlowing {
0% {
background: #FF0000;
}
33% {
background: #7e0fff;
}
66% {
background: #0053FF;
}
100% {
background: #FF0000;
}
}
#keyframes textColor {
0% {
color: #7e0fff;
}
50% {
color: #0fffc1;
}
100% {
color: #7e0fff;
}
}
<div class="homeTitleBack"></div>
<div class="homeTitle">Test</div>
z-index of a child element will always be higher than the z-index of its parent, despite what you set in the CSS.
You can use a :before pseudo element in front of the :after pseudo element however.
Just use one div for the effect and another for the black box
<div class ="homeTitle">
<div style="background: black">Test</div>
</div>
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 6 years ago.
The Div reappeared after the animation stops playing, how do you stop the div from returning to the original place?
#wrapper {
background-color: #999;
position: fixed;
height: 100%;
width: 100%;
}
#wrapper .section{
position: absolute;
top: 0;
width: 51%;
height: 100%;
background: #222222;
}
#wrapper .section.section-left{
left:0;
animation: move 1.5s 1;
}
#wrapper .section.section-right{
right:0;
animation: move 1.5s 1;
}
#keyframes move{
0% {width: 51%;}
100% {width:0%;}
}
HTML code:
<div id="wrapper">
<div class="section section-left"></div>
<div class="section section-right"></div>
</div>
You can add, animation-fill-mode: forwards; to #wrapper .section.section-left and #wrapper .section.section-right
Codepen example