css3 animation/transition/transform: How to make image grow? - animation

I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too)
I was using jquery .animate() but its just too choppy for my liking...
I know I can use the :
-webkit-transform: scale(2);
But I want it to be set to a specific size.. not just double or triple the image size.
Any help?
Thanks

You're looking for the -webkit-transition property for webkit. That allows you to specify two separate CSS rules (for instance, two classes) and then the type of transition to be applied when switching those rules.
In this case, you could simply define the start and end heights (I did both height and width in the example below) as well as defining -webkit-transition-property for the properties you want transitioned, and -webkit-transition-duration for the duration:
div {
height: 200px;
width: 200px;
-webkit-transition-property: height, width;
-webkit-transition-duration: 1s;
-moz-transition-property: height, width;
-moz-transition-duration: 1s;
transition-property: height, width;
transition-duration: 1s;
background: red;
}
div:hover {
width: 500px;
height: 500px;
-webkit-transition-property: height, width;
-webkit-transition-duration: 1s;
-moz-transition-property: height, width;
-moz-transition-duration: 1s;
transition-property: height, width;
transition-duration: 1s;
background: red;
}
Tested in Safari. The Safari team also posted a pretty good write-up on CSS Visual Effects.
However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.

Related

how to set div max width in D3

how can I set the max width of a div within d3?
I tried
svg.append('div')
.attr('class','chart')
.attr("max-width",div_width)
.attr("height",div_height)
but it doesn't do the trick, however, if I set it in a css style with the class, it works,
div.chart {
margin : 2%;
overflow: auto;
background: rgba(51, 51, 51, 0.3);
max-width: 900px; // this works
}
I need the max width to be dynamic which is why I want to set it within d3.
Thanks for your help
I figured it out, it should be in (style) and as a string
svg.append('div')
.attr('class','chart')
.attr("max-width",div_width)
.attr("height",div_height)
should change to
svg.append('div')
.attr('class','chart')
.style("max-width",div_width+'px')
.attr("height",div_height)

Safari SVG transform-origin zoom animation

I have an inline SVG which is being animated, however when you zoom in or out in the browser the object which is being rotated no longer rotates at its centre point.
It works fine in Chrome.
http://codepen.io/chrismorrison/pen/rmLXWw
#rays {
animation: spin 6s linear infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
}
#keyframes spin {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform-origin: center center;
transform-origin: center center;
}
}
I know this is late, but I found the same issue. If you use transform-box: fill-box;, the object will rotate on its axis properly in Safari.
I had a similar issue which I was able to resolve by adjusting the SVG's viewport attribute so that i could set
transform-origin: 0 0;
for the element I need to transform.
I've created a pen here showing the difference between the two: https://codepen.io/mbrrw/pen/NWxMamm
For a 20x20 circle, I changed the viewBox from 0,0,20,20 to -10, -10, 20, 20.
Hopefully this helps!
I know this is a very old question, but I've spent the last hour trying to come up with a solution and I wanted to share my solution in case it ever happens to anyone else!
Just like the OP, zooming in or out in Safari would screw up my transform-origins and they would be based on what the original size of the SVG pre-zoom. In my example, I was trying to rotate with a transform-origin of 100% 0%.
My fix (using Javascript): transform-origin: svgElem.currentScale * 100 + '% 0%';
Now, instead of having my rotate be off-axis, it's always in the right position.
Hopefully that helps someone!
Chrome's implementation of transform-origin is different from other browsers. Try using absolute coordinates.
-webkit-transform-origin: 201px 191px;
transform-origin: 201px 191px;
I'm not sure if this will fix your Safari problem, but it is good practice anyway. Especially if you want it to work in Firefox also.
I fixed it using rem unit to set transform-origin.
.logo-spinner path {
animation: my-spinning-animation 1.8s infinite ease;
transform-origin: 3rem 3rem;
}
Now, animation always remains centred while zooming-in/out on Safari.
(Except for the smallest zoom level which I think is acceptable)

Dropzone.js preview dimension scale to actual image size

I want to ask if there is some way to force Dropzone to use the dimension (dimension ratio) for preview, based on the uploaded image rather then specifying them in Dropzone config.
I want to display the preview of the image in the same dimensions ratio as the original, but smaller.
Thanks
Jan
You should redefine the css styles below :
.dropzone .dz-preview .dz-details, .dropzone-previews .dz-preview .dz-details {
width: auto !important;
height: auto !important;
}
.dz-details img {
width: auto !important;
height: auto !important;
position: relative !important;
}

Isotope animating inserts from top-left of container

For my isotope container, whenever I insert a new item into the container... it initially appears in the top-left of the container (so in the position of the first item) and then it animates by moving down into place where it should go based on sorts.
Here is an example of what I would like to happen though: http://jsfiddle.net/aaairc/H4ZMV/5/. As you see in that example, the new item zooms in starting from the position that it is going to take within the container.
I haven't been able to replicate the issue I'm seeing locally on jsfiddle yet, but I thought someone might have an initial suggestion or point me to what in my jsfiddle example is actually enabling the insert to have the nice zoom in functionality. Is that just default? Something related to the CSS?
Also, not sure if this is relevant, but the container items of my isotope instance or all jpgs.
It had to do with how you specify the CSS. When I changed my CSS over to this it worked how I expected would like.
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
This feature has been built into Isotope v1.4. See Metafizzy blog: Isotope v1.4 - refined inserting animation

CSS3 Animation Question

How can I make a CSS3 Animation play to the end and then stop dead. I don't want it to return the elements being transformed back to their initial states.
Right now I'm using some javascript to add a class to the element after the animation's duration with the same properties as 100% in the animation.
This is possible with the "animation-fill-mode" defined as "forwards", at least in Webkit. I got this result with code like this:
#-webkit-keyframes test {
100% { background-color: #0000ff; }
}
a { background-color: #ff0000; }
a:hover { -webkit-animation: test 1s 1 ease forwards }
Note that specifying start color in 0% keyframe and end color in :hover was not necessary.
Of course, this code is Webkit specific. I haven't tried in other browsers with other vendor prefixes or with the general "animation" property.
put your end values in the main css class and the start values in the animation keyframes at 0%:
#keyframes test {
0% {
background-color: #ff0000; /* start value */
}
100% {
background-color: #0000ff;
}
}
a {
background-color: #ff0000; /* normal state */
}
a:hover {
animation-name: test;
animation-duration: 1s;
background-color: #ff0000; /* final state, after animation is finished */
}
In case this question is still open, I don't think this is possible using CSS3 animations as they're currently specified:
An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation.
However, you should be able to use CSS3 transitions for basic effects. There's a slide in the html5rocks.com presentation that shows how to do this. Here's the relevant [paraphrased] excerpt:
#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }
// Run this to animate to the left
document.getElementById('box').className = 'left';
// Run this to animate to the right
document.getElementById('box').className = 'right';
animation-fill-mode: forwards
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing

Resources