I am trying to animate a train across a angled line. I have generated the SVG page and the train animates accordingly. However when the train gets the the end of the line, its flips and goes backwards.
DEMO HERE
.largetrainpath{
position: absolute;
left: 37%;
top: 670px;
z-index: 99999999;
}
.largeTrain{
motion-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1c1.8,0.7,2.6-2.2,0.8-2.9C127.8,44.6,65.1,21.4,1.8,0.1 C0-0.5-0.8,2.4,1,3L1,3z");
offset-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1c1.8,0.7,2.6-2.2,0.8-2.9C127.8,44.6,65.1,21.4,1.8,0.1 C0-0.5-0.8,2.4,1,3L1,3z");
transform: rotate(-20deg);
motion-rotation: reverse;
animation: move 3s linear;
animation-delay: 1s;
animation-fill-mode: forwards;
width: 94px;
height: 43px;
background: url(img/large-train.png) no-repeat;
position: absolute;
left: 35%;
top: 654px;
z-index: 99999999999;
}
#keyframes move {
100% {
motion-offset: 100%;
offset-distance: 100%;
}
}
Any ideas how i can prevent the train from flipping, and going back on itself? Once it gets to the end of the line i would like the animation to stop there.
Thanks
This is because your path is not a single line from the start to the end. It is a long thin rectangle instead. The path goes from the start to the end, turns the corner, then goes back to the start.
To fix this, trim the path down to just the bit up until the bottom right "end" point. For example:
.largeTrain {
motion-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1");
offset-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1");
}
Related
Is it possible to scale a image from top to bottom, using transform on css?
I have this instance here: http://jsfiddle.net/865vgz82/13/
Currently, the image in the class thumbsskin scales from the center, and expands to top, bottom and sides. It'd like to have it fixed on the top, and only scale down and to the sides. Is that possible with only css?
.thumbsskin img {
height: 135px;
width: 320px;
top: 0;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.thumbsskin:hover img {
opacity: 0;
-webkit-transform: scale(1.9);
transform: scale(1.9);
transform-origin: top;
}
By default, an element transforms with it's center point as the origin. So in this case it will scale from the center on out. You can change this by setting transform-origin, like you did.
Simple example:
div {
margin: 3em auto;
width: 50px;
height: 50px;
background: red;
}
div:hover {
transform: scale(1.9);
}
.d2 {
transform-origin: top;
}
<div></div>
<hr />
<div class="d2"></div>
I've been browsing the web for quite awhile trying to find a way of making icons move onto the screen (from the left and onto the center of the body div) when you load the page. How can this be done?
This is what I have so far:
CSS3
a#rotator {
text-decoration: none;
padding-right: 20px;
margin-left: 20px;
float: left;
}
a#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
a#rotator img:hover {
box-shadow: 0 3px 15px #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: translate()
}
If you want a pure CSS solution, you can use the CSS3 animation feature.
You create or declare a animation with the keyword #animation followed by the name you want to give to that animation. Inside the curly brackets you must indicate the keyframes of the animation and what CSS properties will be applied in that keyframe, so the transition between keyframes is done.
You must specify at least two keyframes, the beginning and the end of the animation with the keywords from and to, followed by the properties inside curly brackets. For example:
#keyframes myanimation
{
from {
left: 0;
}
to {
left: 50%;
}
}
Or a example with three keyframes (the percent indicates the percent of the duration):
#keyframes myanimation
{
0% {
left: 0;
}
10% {
left: 50%;
}
100% {
left: 10%;
}
}
Once you have created the animation, you must specify which element you want to animate, it's just the animation property inside the CSS rule that matches the element. Note that the name in the value must match the one that you've created before, and you the duration of the animation. For example:
a#rotator {
animation: myanimation 5s;
}
Here you can specify the duration, number of times that it must be repeated, etc. You can read the full specs here: http://www.w3.org/TR/css3-animations/
Here you can see a working example with the code you've provided: http://jsfiddle.net/mcSL7/1/
I've stopped floating the element and I've assigned it the position absolute, so I can move it in the body with the top and left properties.
This CSS feature is supported by almost every modern browser, even if some of them need the -webkit- vendor prefix. Check it here: http://caniuse.com/#feat=css-animation
Use jQuery
html
<div id="b"> </div>
css
div#b {
position: fixed;
top:40px;
left:0;
width: 40px;
height: 40px;
background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat;
}
script
var b = function($b,speed){
$b.animate({
"left": "50%"
}, speed);
};
$(function(){
b($("#b"), 5000);
});
see jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/
while using border-radius Opera won't actually hide the overflowing parts of elements. I already tried to apply things I managed to find in similar threads, such as defining the border style or paying attention to positioning with absolute and relative parameters. It is still not working though.
html
<div class="node">
<div class="skill skill1"></div>
<div class="skill skill2"></div>
<div class="skill skill3"></div>
<div class="skill skill4"></div>
</div>
css
.node {
position: relative;
width: 250px;
height: 250px;
opacity: 0.9;
border-radius: 50%;
overflow: hidden;
left: -60px;
border: solid 1px transparent;
}
.skill {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
}
.skill1 {
background-color: #26ac79;
-webkit-transform: rotate(90deg) skewX(45deg);
transform: rotate(90deg) skewX(45deg);
}
.skill2 {
background-color: #25765f;
-webkit-transform: rotate(135deg) skewX(45deg);
transform: rotate(135deg) skewX(45deg);
}
.skill3 {
background-color: #25313f;
-webkit-transform: rotate(180deg) skewX(45deg);
transform: rotate(180deg) skewX(45deg);
}
.skill4 {
background-color: #25193d;
-webkit-transform: rotate(225deg) skewX(45deg);
transform: rotate(225deg) skewX(45deg);
}
Here's the fiddle:
http://jsfiddle.net/Mu9Ar/
Thanks for any help.
Actually the code you provided works in latest Opera with Blink engine, so I guess you can leave your code as is. However if you need it to work in versions up to 12.16 and your page background is white, what you can do is to put .png overlay over your chart which will clip the chart, just like webdevelopers did in old days when there were no border-radius:)
According to the W3 specification:
http://www.w3.org/TR/css3-background/#corner-clipping
A box's backgrounds, but not its border-image, are clipped to the
appropriate curve (as determined by ‘background-clip’). Other effects
that clip to the border or padding edge (such as ‘overflow’ other than
‘visible’) also must clip to the curve. The content of replaced
elements is always trimmed to the content edge curve.
It appears that Firefox implemented the spec correctly by clipping the content to the edge of the curve when using overflow: hidden.
However, Opera is not compliant on this detail.
As an aside, if you add border-radius property to an img element, the image will be clipped correctly.
At this moment, there is no work-around that I know of unless you try HTML5 canvas.
Ok, so I have this rotating CSS3 animation (with a repeating timeout in the animation) almost working but I'm getting this really weird behavior where the animation seems to "jump" backward as it's animation.
I have a demo here in JS Fiddle (EDIT - Please excuse the long delay, it's a necessary part of the animation - a long timeout): http://jsfiddle.net/3mnMz/1/
For posterity, here is my CSS
#logo { position: relative; float: left; width: 175; height: 75px; margin: 0 0 16px; padding: 0; }
#-webkit-keyframes rotate {
0%, 65%, 75%, 100% {
-webkit-transform: rotate(0deg);
}
70% {
-webkit-transform: rotate(360deg);
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 3s;
}
}
#logo span.star
{
-webkit-animation-name: rotate;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
}
#logo span.star { width: 84px; height: 84px; background: url('../img/logo_star.png') no-repeat left top; position: absolute; top: -8px; right: -20px; display: block;
}
Can someone shed some light on the subject?
I'm not sure about what you're trying to achieve, but the reason why it's rotating back and forth is because you're stating at keyframe 70% that the rotation is 360, then at 75 that it's rotation 0, so it goes back to the original state.
The animation properties should also be stated within the span.star element, not within the keyframes.
Here is a demo:
http://jsfiddle.net/3VrjE/
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 7 years ago.
I'm making a CSS animation at the minute, and in it I'm moving stuff and want it to stay at the end position until the user moves their mouse away.
body {
background: url('osx.jpg');
padding: 0;
margin: 0;
line-height: 60px;
}
#-webkit-keyframes item1 {
0% { bottom: -120px; left: 0px; }
10% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
100% { bottom: -40px; left: 10px; -webkit-transform: rotate(5deg); }
}
#-webkit-keyframes item2 {
0% { bottom: -120px; left: 0px; }
10% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
100% { bottom: 60px; left: 20px; -webkit-transform: rotate(7deg); }
}
#-webkit-keyframes item3 {
0% { bottom: -120px; left: 0px; }
10% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
100% { bottom: 160px; left: 30px; -webkit-transform: rotate(9deg); }
}
div {
position: relative;
}
#folder {
width: 120px;
margin: 0px auto;
}
#folder > div {
position: absolute;
}
#folder:hover > div:nth-of-type(1) {
-webkit-animation-name: item1;
-webkit-animation-duration: 10s;
}
#folder:hover > div:nth-of-type(2) {
-webkit-animation-name: item2;
-webkit-animation-duration: 10s;
}
#folder:hover > div:nth-of-type(3) {
-webkit-animation-name: item3;
-webkit-animation-duration: 10s;
}
Whenever the animation ends though, it just repeats itself. I only want it to happen once and stay where it is until the user moves away. I tried using the paused thing from the spec but it doesn't work as I'd expect it to. Any help is appreciated. Thanks. :)
The following comment worked for me. Thanks michael
"You need to add the fill-mode to freeze the animation state at the end of the animation.
-webkit-animation-fill-mode: forwards;
forwards leaves the animation in the state of the last frame
backwards leaves the animation at the start
Just in case your animation still resets to the first frame, be careful with the order in which you declare the css:
This is working fine:
animation: yourAnimationName 1s;
animation-fill-mode: forwards;
This won't (reset to first frame):
animation-fill-mode: forwards;
animation: yourAnimationName 1s;
Tricky!
If I understand the question correctly, it sounds like you need to set the iteration to '1'.
-webkit-animation-iteration-count: 1;
The css3 animations reset to the default style at the end of the animation. You can try something with javascript:
You can add an eventListener to your animation, retrieve the styles you wish to keep, apply them manually and remove the animation.
document.getElementById('yourdiv').addEventListener(
'webkitAnimationEnd',
function(){
document.getElementById('yourdiv').style.backgroundPosition = '0px 0px';
document.getElementById('yourdiv').style.webkitAnimationName = 'none';
},
false
);
try this:
-webkit-animation-duration: 10s, 10s;
:)