We are trying to animate a div as follows:
1- Stretch from 0 to 100% (from left to right)
2- Then shrink from 100% to 0 (also from left to right)
3- then repeat.
We have the following div:
div {
position: absolute;
height: 2px;
background: #c60000;
left: 0;
top: 0;
color: #789;
width: 0;
animation-duration: 5s;
animation-name: progress;
animation-iteration-count: infinite;
}
#keyframes progress {
50% {
// transform-origin: right top;
width: 100%;
}
}
<div></div>
But no matter what we do using transform-origin and floats, positioning etc, the second part shrinks from right to left. i.e. the left side is always the anchor, whereas we want the right side to be the anchor when shrinking is taking place.
Would appreciate any help.
div {
position: absolute;
height: 2px;
background: #c60000;
top: 0;
color: #789;
animation-duration: 5s;
animation-name: progress;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes progress {
0% {
left: 0;
width: 0;
}
50% {
right: 0;
width: 100%;
}
100% {
right: 0;
width: 0;
}
}
<div></div>
Related
I ran into a problem, I made a simple animation using the Shape Shifter site and I want this animation to start on my site when I hover over the picture, but so that when I remove the cursor from the picture, the animation starts in the reverse order and that it is smooth.
At the moment, I managed to make this animation run when the cursor is hovered, but when I remove it from the picture, the animation immediately returns to the first frame
Here is the code that I wrote
.box {
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
#keyframes playStart {
0% {
background-position: 0px 0px;
}
100% {
background-position: -15360px 0px;
}
}
#keyframes playEnd {
0% {
background-position: -15360px 0px;
}
100% {
background-position: 0px 0px;
}
}
.anim_image {
animation-duration: 1000ms;
animation-timing-function: steps(60);
width: 256px;
height: 256px;
background-repeat: no-repeat;
background-image: url(http://cu14284.tmweb.ru/Image/sprite_60fps.svg);
animation-fill-mode: forwards;
}
.anim_image:hover {
animation-name: playStart;
}
.anim_image {
animation-name: playEnd;
}
<div class="box">
<div class="anim_image"></div>
</div>
I'm trying to make a strikethrough animation like the effect here:
The strike line appears from left to right and disappears from left to right.
#keyframes strike {
0% {
width: 0;
}
50% {
width: 100%;
}
100% {
width: 0;
}
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: strike;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: fill;
animation-direction: normal;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Is there a way to achieve that only with CSS ?
You can use transforms and transform-origin in the keyframe animation to make strike-through apear from left to right and disapear from left to right.
The point is to scale the pseudo element on the X axis for 0 to 1 with a transform origin on the left then back to 0 with a transform origin on the right (similar to this hover effect see last example of the answer).
And here is an example with your markup :
#keyframes strike{
0% { transform-origin: 0% 50%;transform:scaleX(0); }
50% { transform-origin: 0% 50%;transform:scaleX(1); }
50.01% { transform-origin:100% 50%;transform:scaleX(1); }
100% { transform-origin:100% 50%;transform:scaleX(0); }
}
.strike {
position: relative;
}
.strike:hover:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation: strike .75s ease-in-out forwards;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Here is a sample using transition, where it on hover toggle left/right position.
.strike {
position: relative;
}
.strike::after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
background: black;
}
.strike:hover::after {
right: 0;
left: 100%;
transition: right .5s .0s, left .5s .5s;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
This code takes a ball and moves it to the right and back again. How can I get it to move to the right, and stay there?
http://codepen.io/chriscoyier/pen/pBCax
You can fiddle with a Live version of the output there.
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
#keyframes move {
50% {
top: 200px;
left: 130px;
}
}
The css code says 'infinite' and when I delete that, it moves the ball to the right, and then back to where it was one time. I'd like it to move to the right, and just stay there.
Replace infinite with forwards and add a from and to to your #keyframes
Adjust the top, left values as necessary.
See below:
body {
padding: 30px;
}
#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease forwards;
}
#keyframes move {
from {
top: 0px;
left: 10px;
}
to {
top: 200px;
left: 130px;
}
}
<h1>Animate with Top/Left</h1>
<div id="animate"></div>
Here you go:
animation: move 3s ease forwards;
http://codepen.io/anon/pen/yebvZx
You can read about the animation-fill-mode property here:
https://drafts.csswg.org/css-animations-1/#animation-fill-mode
forwards -
After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.
Your are looking for:
animation-fill-mode: forwards;
I have a pretty simple animation that has borders that I created animate in width, in height, and then the center fades in.
The issue I'm having is I can't figure out how to animate from the center, rather than left to right (for the top and bottom borders) and top to bottom (for the side borders).
Is there any simple way to get the animation to happen from the middle?
Example of the code for the top and bottom animation:
#keyframes tb {
0% {width: 0;}
100% {width: 800px}
}
JSFiddle of the code.
You need to animate the left and top, too. For the horizontal bars, set the property left to 400px (50%) on the first keyframe, and to 0px on the last keyframe. Same goes for the vertical bars. Here is your fixed example:
#import url(https://fonts.googleapis.com/css?family=Montserrat:700);
html{
background: black;
}
#holder{
width: 800px;
display: block;
position: relative;
}
#follower {
display: block;
text-align: center;
padding: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
line-height: 70px;
color: #fff;
background: rgba(255,255,255,.1);
animation: main 2s ease-out;
-webkit-animation: main 2s ease-out;
}
#keyframes main {
0% {opacity: 0}
50% {opacity: 0}
100%{opacity: 1}
}
#-webkit-keyframes main {
0% {opacity: 0}
50% {opacity: 0}
100%{opacity: 1}
}
#t, #b {
width: 800px;
height: 2px;
background: #fff;
position: absolute;
display: block;
animation: tb .5s 1 ease-out;
-webkit-animation: tb .5s 1 ease-out;
}
#t {
top: 0;
left: 0;
}
#b{
bottom: 0;
left: 0;
}
#r, #l {
width: 2px;
height: 110px;
background: #fff;
position: absolute;
display: block;
animation: rl 1s 1 ease-out;
-webkit-animation: rl 1s 1 ease-out;
}
#r{
left: 0;
top: 0;
}
#l {
right: 0;
top: 0;
}
#keyframes tb {
0% {
width: 0;
left: 400px;
}
100% {
width: 800px
left: 0;
}
}
#keyframes rl {
0% {height: 0}
50% {
height: 0;
top: 55px;
}
100% {
height: 110px;
top: 0;
}
}
<div id="holder">
<div id="t"></div>
<div id="b"></div>
<div id="r"></div>
<div id="l"></div>
<div id="follower">
Super Long Text Goest Here!
</div>
</div>
You can play around with your timing, and make it start at right point in your animation... using an animation-delay.
E.g.
#keyframes makeFatter {
0% {width: 0;}
100% {width: 800px}
}
#makeMeFat {
animation-name: makeFatter;
animation-duration: 5s;
animation-delay: -2.5s; /* Makes it start at 50% of your animation, i.e. width: 400px */
/* blah blah... rest of the CSS code */
}
i'm trying to mimic a loading function for this animation, so i want the end point of the animation to be the top right edge of the browser.
how do i do this? ie what can i replace "left:1000" with to always be the top right edge of the browser.
.square {
width: 30px;
height: 3px;
background: red;
position: relative;
animation: colors 2s;
-webkit-animation: colors 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes colors {
0% {
left: 0px;
top: 0px;
}
99% {
left: 1000px;
}
}
#-webkit-keyframes colors {
0% {
left: 0px;
top: 0px;
}
99% {
left: 1000px;
}
}
solution is to use both left and margin-left
JSFIDDLE DEMO
.square
{
width: 30px;
height: 3px;
background: red;
position: relative;
animation: colors 2s;
-webkit-animation: colors 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
top: 0px;
margin-left:-30px;
}
#keyframes colors {
0% {left: 30px;}
99% { left: 100%;}
}
#-webkit-keyframes colors {
0% {left: 30px;}
99% { left: 100%;}
}
position:absolute; and right:0 will take you to the right edge of the browser.
.square{
position:absolute;
}
#keyframes colors{
from{
left:0;
top: 0px;
}
to{
right:0;
}
}
After running this, I am assuming you're trying to do something like how YouTube has that loading bar. If so, trying adding this line to your ".square" class.
top: 0px;
And then just remove the "relative" positioning, and change it to "fixed".
Hope that helps, but might not even be related to your problem.