I'm trying to find out how does medium do the animation when you click the bottom button to load the next article.
To see it, please head over to a Medium article, scroll to bottom and click to go to the next article.
I know how to use AJAX to load another page, but how can I use a similar animation ? I've searched through their code, but couldn't find it.
is similar to jquery pop effect
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/
try pop effect on page.
it is just a css transition combination of scale and fade;
You can try to achieve the same effect using combination of css-animations and javascript. As a starting point you can look at effeckt.css it's a collection of css animations. Unfortunately it doesn't contain exact animation, so I've tried to reproduce it in this fiddle
The basic idea is to use two effects scaleDownFromFront and slideFromBottom:
#keyframes scaleDownFromFront {
to {
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes slideFromBottom {
from {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
Related
I know it works because I have used it in the past, however this time around it is giving me a hard time and I ma not sure what I am doing wrong.
<Icon type={sensorKey} style={sensorKey==='car'?[{...activityStyles.icon}, {transform: [{ rotateY: '180deg'}]}]:activityStyles.icon} size={Typography.bodyLineHeight} />
Just set: transform: rotateY(180deg).
We need you to provide an example of your html and css in order to give you the help you are asking for. Without it all we can do it guess.
But I will take a stab at it (note I added more for cross browser functionality):
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Safari 3-8 */
transform: rotate(180deg);
Currently i am running CSS based ken burn effect using opensource code https://codepen.io/anon/pen/VzYRWV
I would like to know how to get the current image which is getting displayed in text box shown in the above demo.
Thanks for your kind help.
Try these CSS effects https://jsfiddle.net/ipsjolly/cugLbrfu/4/
.parent.rotate:hover .child, .parent.rotate:focus .child {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
.parent.scalein:hover .child, .parent.scalein:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent.scaleout:hover .child, .parent.scaleout:focus .child {
-ms-transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
Created two new scale In and Scale Out
Source
https://css-tricks.com/zooming-background-images/
You can catch css-animations events with javascript function addeventlistener
Ex.
// first image
var img = document.getElementsByClassName('slideshow-image')[0];
// fired on animation start
img.addEventListener("animationstart",function() {
// do stuff here
console.log("Animation start");
},0);
Now, although this works well and how it is supposed to do it, with (not your) example will not work well since the animation is not sequential but all at the same time. (Controls the percentage instead of "steps")
But, you can get the idea and play with it to archive what you're looking for.
Important note: Vendor prefix is still used.
Additional references:
Event reference
animationstart A CSS animation has started.
animationend A CSS animation has completed
animationiteration A CSS animation is repeated.
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A CSS transition has been cancelled.
transitionend A CSS transition has completed.
transitionrun A CSS transition has began running (fired before any delay starts).
Detecting CSS Animation Completion with JavaScript
CSS Animation Events
SO tag addeventlistener
SO tag css animations
What I am trying to do is depending on a variable I get, change the 100% rotate value in the keyframe to the new calculated value. I have no problem with using Javascript to do this, but I want it to be done in the External CSS, not inline, once changed I need to restart the animation for that time. Is this possible? If so, how? (NOTE ALL DONE CURRENTLY THROUGH BUTTON CLICK) this is not to be saved, only done to update the graphic with a new position.
.arrow {
-webkit-animation: rotate 3s linear 0 1;
animation: rotate 3s linear 0 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-play-state: paused;
animation-play-state: paused;
visibility: visible !important;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Any help will be much appreciated! I have been trying to find something that would work for about a week now.
It is possible to change keyframes on loaded stylesheets. Here you have a stack overflow answer from 2011. And here's a link to a recent blog post about it.
So, as adeneo mentioned, it is not possible to make javascript change an external style sheet.
The thing you can do is make 2 css classes and use javascript to change the class. This way you are not using inline styles.
Also, because you are changing the class, the animation will begin from the start - as you want it.
I am trying to make the element rotate 45ยบ on click action, the toggle element should open.
If you click on it again I want it to rotate back and the toggle element should close.
I have tried a lot of codes, I would like to keep it as simple as possible.
Plugin I am using
jQuery:
$(".category-desc-toggle").click(function () {
$('.category-desc').slideToggle(300);
$(".category-desc-toggle").toggleClass("rotate45");
});
Css:
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
What am I doing wrong? Is there an easier way(Less code)?
Indeed JuanT is right that CSS3 can accomplish the transformation, See Firefox MDN Link for more info.
jsFiddle: http://jsfiddle.net/7K6GP/4/
<div class="description-wrapper">
<div class="category-desc-toggle rotate"></div>
<div class="category-desc">Just Some Description</div>
</div>
<script>
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
</script>
Without knowing your requirements, its hard to give you a full answer. Though, this can be accomplished with css3's rotate and transition property.
transform: rotate(45deg);
I have created a jsfiddle demonstrating this. http://jsfiddle.net/hGZbW/
EDIT:
If anyone is trying to accomplish this without CSS, there is a jquery plugin that supports most major browsers. To accomplish this affect for IE you would need to use the matrix filter.
https://github.com/heygrady/transform/wiki
so heres the animation
into
and this one
how can they do that?
1. re-size animation
2. stack and animate.
just CSS3 ? any example?
Thanks
Adam Ramadhan
To answer your question:
To resize and make image animate ( zoom in effect ) you should use something like :
ul#pics li:hover {
-moz-transform: scale(1.1) rotate(0deg);
-webkit-transform: scale(1.1) rotate(0deg);
-o-transform: scale(1.1) rotate(0deg);
-ms-transform: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
}
For stack and animate, you should use CSS3 and jQuery.
On my machine using Chrome, I see a CSS3 -webkit-transform. Since that's the only transform they're using, it must be detecting that my browser is webkit and choosing the right way to transform. They probably have various other techniques for other browsers.
However, there's no jQuery fallback, as the page doesn't use jQuery; there's probably a different JavaScript fallback developed by Google though.
Is this something you are looking for?