Animate Frames Over What Time? - javascript

I'm trying to animate an image. It's a simple animation moving from left to right. This will eventually be a gif that is downloaded by the user.
I currently have this animation as 5 frames at 100ms each, but the animation looks a bit jittery. Then I increased to 20 frames of 50ms each, but still looks jittery. Wondering if there was any input on making easein / slidein animations smooth. Should I increase the frames even more?
My Current Animation Is (Each Frame at 100ms)
left: [x, x, x, x, x]
Thanks in advance!

It is better to use a CSS animation for this. It works smoother and the code can be simpler. Here is an example:
<style>
#movie {
transition-property: left;
transition-duration: 1s;
transition-timing-function: linear;
width:100px;
height:100px;
background-color:red;
position:absolute;
left:100px;
top:100px;
}
</style>
<script>
function move(d) {
d.style.left = '500px';
}
</script>
<div id="movie" onclick="move(this)"></div>
Click on the red rectangle will smoothly move it right.

Related

Animate text to make it scroll

At the top of my page, I want to have some text scroll from left to right, as an announcement. I've heard about CSS animations before, but I don't know how to make one. So far, this is what I have.
p {
position: relative;
animation-name: example;
animation-duration: 13s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {left:-200px; top:0px;}
50% {left:700px; top:0px;}
}
<p>This is an announcement</p>
I am wondering if there is an easier way to make the scrolling animation. I don't know JavaScript, but is there a way to make this animation in JavaScript or just in CSS?
You can use translateX with the transform property.
p {
animation: example linear 5s infinite;
}
#keyframes example {
from {
transform: translateX(-40%);
}
to {
transform: translateX(100%);
}
}
<p>This is an announcement</p>
So currently, your animation kind of restarts every 13 seconds and pauses and then starts over again. In your animation, the text movement is not consistent, it starts to move fast and when it ends, it gets slower.
A solution is to use the <marquee> tag. This tag is especially made for scrolling text!
For example, this code will automatically do whatever your code does, but better and less lines of code:
<!DOCTYPE html>
<html>
<body>
<marquee direction="right" >This is a paragraph.</marquee>
</body>
</html>
There are also a lot of attributes that you can change, including the direction, speed, height, loop, width, etc. You can change these attributes to your liking to make the scrolling text better.

How to reduce circle size?

I have a div which is circle in shape.I have done animation things with CSS .Now i want to do when circle go to bottom then circle size remain same (now this is ok for me) but when circle bounce back to top then circle reduce it's size.I don't know, is it possible with CSS ? I am very week in JS .Can anyone solve my problem or suggest me the right way?
JsFiddle Link
Thanks in advance.
HTML:
<div class="hello"></div>
CSS:
.hello{
width:100px;
height:100px;
border:5px solid black;
border-radius:55px;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
A couple of things. There's a JSFiddle at the bottom which shows everything I list:
To reduce the circle size, just add height: <whatever>px; and width:<whatever>px; to the last stage of your animation.
Note that if you want it to only decrease over the last section (where it bounces back up to the top), you will need to specify that the height and width values are still the starting values at the 75% stage.
Because you're changing the size of the circle, the animation will "jump" at the end back to its existing form. This is because, by default, CSS animations aren't persistent. Whatever changes you make only last as long as the animation before reverting to normal.
If you want the change to be persistent and stay after the end of the animation, you need to use animation-fill-mode: forwards;.
I've created an edit on your original JSFiddle with all of the above changes Here.
Try this - fiddle
100% {background-color:red; left:0px; top:0px; width:50px;height:50px}
You can modify width and height of the div in your keyframes to get desired effect.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
75% {background-color:green; left:0px; top:200px;width:100px;height:100px;}
100% {background-color:red; left:0px; top:0px;width:50px;height:50px}
}
FIDDLE
We are reducing the width and height of circle in the keyframe 100% so when the ball bounces back i.e. from keyframe 75% to 100% ball is animated to a smaller size. Note that to keep the size of the ball same till keyframe 75% we are again defining height:100px and width:100px in that keyframe.

animate scale and rotate separately with css3 and jquery

UPDATED and CLARIFIED
I need to execute some jquery that does an immediate rotate (using css3 transform) on an icon. And then once the icon is rotated I want to animate and scale to 200% of the size. However, since scale and rotate are both one CSS3 property (transform) I am seeing that both of the transitions are occurring as an animation for 0.5s. (in the JQUERY code I also update the location (top, left), but since that is not in the transition: tag, it happens immediately as required).
What I want is the rotate to happen immediately, and the scale to happen over 2s. Any ideas?
CSS:
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s;
JQUERY:
self.pick = function (cmd) {
var pt = Tools.cmdToPoint(cmd);
$(self.bbox).css("position", "fixed");
$(self.bbox).css("top", pt.y - 32);
$(self.bbox).css("left", pt.x - 32);
$(self.bbox).css("opacity", "1");
var theta = self.angle(cmd);
$(self.bbox).css("transform", "rotate(" + theta + "deg) scale(2.0)");
$(self.bbox).css("-webkit-transform", "rotate(" + theta + "deg) scale(2.0)");
}
What happens is that since transition on the item, both the scale and the rotate occur in an animation over 0.5s.
You really have 2 options, but I think nested div's will most likely be your best option. You can use jQuery to control the timing of certain animations, but it will require a decent amount of coding to get it right.
Per Andrea Ligios comment, you should set a delay on the two class so that the transition starts after 0.5s
HTML
<div id="rotate" class="half rotate">
<div id="scale" class="two grow">Rotate</div>
</div>
CSS
.half {
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.two {
transition: all 2s ease-in-out 0.5s;
-webkit-transition: all 2s ease-in-out 0.5s;
}
#rotate, #scale {
height: 150px;
width: 100px;
text-align: center;
margin: 0 auto;
}
#scale {
border: 1px blue solid; /*for visualization*/
}
.rotate:hover {
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
}
.grow:hover {
transform: scale(2.0);
-webkit-transform: scale(2.0);
}
Here is a CSS demo fiddle : http://jsfiddle.net/adjit/w4kgP/5/
Your jQuery option involves setting timeouts, the only thing is the reverse animation doesn't go exactly in the reverse order. It will shrink and un-rotate with an interval of .5s. You can ofcourse also set a timeout for mouseout
jQuery Option
$('#rotate-scale').hover(function(){
clearTimeout(timeout);
$this = $(this);
$this.addClass('rotate');
timeout = setTimeout(function(){
$this.css("-webkit-transition", "all 2s ease-in-out");
$this.addClass('grow');
}, 500);
}, function(){
clearTimeout(timeout);
$(this).css("-webkit-transition", "all 0.5s ease-in-out");
$(this).removeClass('rotate');
$(this).removeClass('grow');
});
Here is a jQuery demo fiddle : http://jsfiddle.net/adjit/tR7EY/1/
Short answer: Use GSAP.
Long answer: CSS3 transform properties cannot really be individually animated, unless you happen to be good with transformation matrixes and are ready to write a lot of supporting code for a better animation system. Not only would you have to deal with converting the transform properties into transforms matrices, but you'd also need some sort of system to dynamically mix different matrix states to be actually able to decouple timings. This requires a lot of advanced mathematics and development time, which would most likely be better spent elsewhere.
EDIT: Further reading: How to read individual transform values in js
EDIT2: Depending on what exactly you're trying to do, you might be able to separate the animations by splitting them across several nested divs. Eg. The outermost div handles the scale animation and within it is a div with a rotation animation. CSSdeck example

Working with a css3 key frame slide effect but cant figure out how to configure correctly.. Fiddle included

The idea is to have a responsive version of this fiddle(see below) that is 100% wide and has a height of 500px... If I adjust the width of this to 100% it messes up along the end of the animation.. How should I go about making a simple animation like this that will work cross browser, have a width of 100%, be displayed seamlessly, and a switchable height via media queries(I can do the queries part)..
my code: http://jsfiddle.net/hkJsm/
html
<div id="logo"></div>
css
#-webkit-keyframes slide {
from{
background-position:575px;
}
to{
background-position:1725px;
}
}
#logo{
text-align:center;
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
Thanks for all the help
Your problem is interesting, so I realized the image had to be cropped because in CSS3 you can't manually flip images, so I've edited it. It is working in this fiddle, and was fixed by editing this image to this, and changing the background-position property a bit on to in the animation:
background-position:1725px;
to
background-position:1645px;
The image conversions are shown below.
This image
To this
Here's what you can do:
Fiddle: http://jsfiddle.net/hkJsm/1/
CSS
.outer{
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
#logo{
min-height: 80px;
}
HTML
<div class="outer"><div id="logo"> </div></div>

JQuery, keep inner <div> orginal position on animation of container <div>

I'm building a small website, and i'm having an issue with jQuery animation,
Basically i have placed a small text (one character div) inside a circle (another div), and i want it to grow when the user hovers over it while keeping the inner div (text) at the original position, the circle will shrink back to original size upon mouseleave() event.
The growing/shrinking part is working quite good, the problem is with the inner text which changes position upon mouseenter().
Here's the HTML
<body>
<div class="steps">
<div id="one" class="number">
<div id="num-text">
<p><strong>1</strong>
</p>
</div>
</div>
</div>
</body>
with 'steps' serving as a container and 'number' the actual circle !
Here's a link to the JSFiddle of this question: http://jsfiddle.net/Rockr90/hZSKA/
Thank you !
Edit:
Actually, the flickering only happens on Chrome, the example with CSS3 works on IE and FireFox as expected, maybe it has something to do with webkit ?
This is possible with CSS only! You dont need jQuery for this and I will explain how to do it with this example. I've used display table for the circle so that we can use display table-cell for perfectly centered text
HTML
<div class="circle">
<p>1</p>
</div>
CSS
.circle {
position:relative; //set up a position, not needed, but for example
top:100px;
left:100px; // width and height
width:100px;
height:100px;
display:table; // display table for centered <p> with table-cell
background-color:blue;
border-radius:50%; // make it a circle!
-webkit-transition: all 0.5s; // transition
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.circle:hover {
margin-left:-10px; // on hover we will increase the height and width
margin-top:-10px; // we will also set the margin to - to make it stay on the same spot, +20 in height and width means -10 in margin
width:120px;
height:120px;
}
.circle p {
display:table-cell; // display table-cell magic
vertical-align:middle; // put the text in the middle!
text-align:center;
font-size:2em;
color:white;
}
FIDDLE
http://jsfiddle.net/n6D46/
If you give #num-text a height, you can vertically align it to the center using the absolute positioning you already have on it:
#num-text {
position:absolute;
text-align:center;
color:#eee;
font-size:24px;
width:100%;
height: 24px;
top:50%; margin-top:-12px; }
See fiddle here: http://jsfiddle.net/hZSKA/1/
As a side note, it's probably possible to do this same effect using CSS3 but that may not be backwards compatible with older browsers.
A quick (but rough and tumble) fix would be to also animate #num-text:
function () {
$(this).animate({
height: '-=10px',
bottom: '-=5px',
width: '-=10px'
}, 50);
$('#num-text').animate({'top': '-6px'}, 50)
});
});
JSFiddle: http://jsfiddle.net/hZSKA/5/
Although I'm sure there will be better answers.
EDIT: whoops, linked to the wrong JSFiddle.

Categories

Resources