https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset
According to the link above, the stroke-dashoffset css property accepts percents.
What is the value that the percent is a percent of?
I expected it to the be the total length of the path. But in some experimentation that doesn't seem to be the case.
Here I try to animate from 0% to 100%...
.circles {
stroke-dasharray: 50%;
animation-name: dashingRotation;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#keyframes dashingRotation {
0% {stroke-dashoffset: 0%;}
50% {stroke-dashoffset: 100%;}
100% {stroke-dashoffset: 100%}
}
full code: https://jsfiddle.net/tssn40yL/
... but the dashes do not take up half the circles and the animation does not go all the way around.
So what do does that percent reference?
Per the SVG specification
If a <percentage> is used, the value represents a percentage of the current viewport (see Units).
... The percentage is calculated as the specified percentage of sqrt((actual-width)**2 + (actual-height)**2))/sqrt(2).
Related
I'm learning CSS and playing with TranslateY
I have reached an issue. When I hover my mouse over a div, a JavaScript event (mouseover) is fired and simply appends this CSS class and as desired, the new element slides in from below
.slideIn{
animation: slide-in 0.5s forwards;
}
#keyframes slide-in {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
The first observation I have is my numbers appear backwards. When it's at 0%, translate (meaning move along the Y axis) 100%. To me the CSS reads as if it starts in position then moves down to position 0%.
However what I'd like to achieve is when this elements slides in, is if I hover the mouse over this new element, it grows by a little. I would suspect something like
.growMore{
animation: grow-more 0.5s forwards;
}
#keyframes grow-more {
0% { height:100%; }
100% { height: 150%; }
}
I did try adding another TranslateY but it also gave no result, hence why I tried with height
Is this possible?
When using CSS bounce key-frames i have set the top of the bounce to 870px, but if I re-size the window the object can bounce past the border of the window, is there any way to change the bounds with the screen size.
#-webkit-keyframes bounce{
from, to{
top: 0;
-webkit-animation-timing-function: ease-in;
}
50%{
top: 870px; /*value in question*/
-webkit-animation-timing-function: ease-out;
}
}
Using view-port units allowed the animation to scale to the screen size. credit to #Manoj Kumar for introducing me to them.
I am trying to get this animation to stay in its last keyframe on hover but it keeps reverting back to the beginning. I don't mind if I hover off it reverts but not during the hover. I looked through a lot of stack questions and everyone said to uses the animation-fill-mode: forwards, but that doesn't seem to work.
Here is my code and a link to a jsfiddle
.circle:hover .spin {
-webkit-animation-name: drop;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: 0;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes drop {
100% {
-webkit-transform: rotate(90deg);
}
}
For those of you with a similar problem, first make sure you are using animation-fill-mode: forwards. See this related question.
In this specific case, the following is relevant:
CSS Transforms Module Level 1
A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.
Since the .circle element is a span, it is inline by default, therefore the property transform: rotate() won't have an effect on it after the animation ends. Changing the display of it to either inline-block or block will solve the problem.
You should also be using the animation shorthand. In addition, add in other vendor prefixes:
Updated Example Here
.circle:hover .spin {
display:inline-block;
-webkit-animation: drop 1s 1 alternate ease-out forwards;
-moz-animation: drop 1s 1 alternate ease-out forwards;
animation: drop 1s 1 alternate ease-out forwards;
}
I am in desperate need of help.
What im trying to do is the same thing mozolla did to the homepage of firefox for their firefox OS. The flaming fox.
Heres the demo of it: http://davidwalsh.name/demo/firefox-animation.php
And here is my animation, notice the wobble. The frames are spaced evenly.
http://jsfiddle.net/vSXcr/
Any ideas?
.bannerimg {
background: url(http://beresponsive.net/tcex/img/ani3.png) repeat-x;
width: 432px;
height: 537px;
animation: animate-kids 3s steps(32) infinite;
-webkit-animation: animate-kids 3s steps(32) infinite;
-moz-animation: animate-kids 3s steps(32) infinite;
}
#keyframes animate-kids {
0% {background-position: 0 0; }
100% {background-position: -13958px 0;}
}
#-webkit-keyframes animate-kids {
0% {background-position: 0 0; }
100% {background-position: -13958px 0;}
}
#-moz-keyframes animate-kids {
0% {background-position: 0 0; }
100% {background-position: -13958px 0;}
}
<div class="bannerimg"></div>
It wobbles because your total sprite width (13958px) does not evenly divide into the number of frames your animation is stepping through (32): 13958 / 32 = 436.1875. This will cause the stepped value during the animation interpolation to be rounded by the browser, which causes the wobble. This also means the location of your illustration varies between cells.
If you look at David's demo, you'll see his animation is smooth because it divides evenly: 6864 / 44 = 156
You'll need to space your frames out more so your total sprite width divides evenly into 32 frames: 32 * 437 = 13984. Pad your sprite so that its width is 13984px and your frames should be evenly spaced at 437px.
I'm trying to make a cube appear at the top of the page with css animation and keyframes.
but he appears at the beginning and only after does the animation.
how do i make it appear just from above?
I wanted that loads up the page and past two seconds the cube appeared.
<div id="cube"></div>
cube{
position: relative;
left:60px;
width:100px;
height:200px;
background:red;
-webkit-animation-name: cube;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 0.8s;
}
#-webkit-keyframes cube {
0% {top: -200px;}
100% {top: 0;}
}
here is my example
http://jsfiddle.net/hmmatos/epZJB/
Sorry if I've misunderstood your question, but I'm not really sure how you mean so I've done two different examples hoping that at least one of them will help you.
Demo One
What I've done here is I've added -webkit-animation-fill-mode: forwards; which will maintaine the last state of the animation, making the div stay visible at the position you have set.
Demo Two
In this demo, I'm animating the opacity instead of the positions.
So insted of sliding the div from top: -80; to top: 0; the div fill just fade into place. Also this example uses the -webkit-animation-fill-mode: forwards;.
Here's a good resource if you want to read about CSS animations.
http://www.w3.org/TR/css3-animations/
Hope this helps!