Take this example:
#-webkit-keyframes slideInViewport {
from{
-webkit-transform: scale(1);
-webkit-transform: translate3d(0, 0, 0);
}
to{
-webkit-transform: scale(0.8);
-webkit-transform: translate3d(250px, 0, 0)
}
}
This results in the div first translating 250px to the left and then scaling. How can I make it translate3d at the same time it is scaling?
I have achieved this animating on the left property, but that results in very poor performance.
The solution is: put them all in one line.
#-webkit-keyframes slideInViewport {
from{
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
to{
-webkit-transform: scale(0.8) translate3d(250px, 0, 0);
}
}
Related
I installed animate.css and am quite happy with it. Only one thing I cannot change: the amount of the position change.
In particular I use the animation "fadeInUp" and want to change from what point exactly the fading starts. At the moment it's too much.
I checked the css file but the only thing I found concerning this is:
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
I can't see how I can change that here. Any help is highly appreciated.
Here's the demo: http://codepen.io/anon/pen/WGLGyY
the DIV doesn't rotate when the keyframe is:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: scale(2, 2) rotate(180deg) translate(200px,200px)
}
}
when I change the keyframe to:
#keyframes test1{
0% {
transform: rotate(0) scale(1, 1) translate(0,0)
}
100% {
transform: rotate(360deg) scale(2, 2) translate(200px,200px)
}
}
It rotate again.
So what's the reason here?
I know the order may affect the transform.
Maybe because rotate(360deg) equals rotate(0); But when I change the order of transform it comes back again....
Use transform: none for your first keyframe, and it will rotate.
Here it is in action:
#keyframes test1{
0% {
transform: none;
}
100% {
transform: scale(2, 2) rotate(360deg) translate(200px,200px)
}
}
#test{
width:200px;
height: 200px;
background: red;
animation: test1 3s infinite
}
<div id="test"></div>
I am working on a proof of concept. I am trying to duplicate Tinder UX using HTML and CSS, here's my link: CodePen
The problem is that I have two main animations which should run in parallel with each other. But they run sequentially, one after another. Is there a way to run them at the same time?
animation on profile picture.
.tinder-profile
{
-webkit-animation: avatar 0.8s;
animation: avatar 0.8s;
}
#keyframes avatar {
0% {
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
60% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
and pulsing circles in the background:
<pre>
.tinder-ping1{
-webkit-animation: ping 3s ease-in-out infinite;
animation: ping 3s ease-in-out infinite;
z-index:9;
}
#keyframes ping {
0% {
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 0.0;
}
40% {
opacity: 1.0;
}
100% {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
opacity: 0.0;
}
}
</pre>
Here is a link to the EditPen, where you can see all the code: CodePen
It has to do with the initial position of your tinder-ping elements. They all start full sized and so effectively the animations don't appear to be working until the third one finally resizes to be small. You'll have to play around with the actual settings, but setting pings 1, 2, and 3 to have
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 0;
As initial values makes it better. You might also need to test out z-indexes, but that is a place to start.
In essence, your third ping is hiding the other two because it is 520x520 pixels until after the animation delay.
I'm using Chrome Version 37.0.2062.120 m
I have a carousel created in owl carousel 2 and added a number of different CSS3 animations for transitions. The problem is Chrome always keeps a section of the top left of the carousel on screen during any transition.
It is not an element being kept on screen, but a glitch of different sizes cut through the carousel.
I have included an example here:
Javascript
this.$el.owlCarousel({
nav:true,
autoplay:true,
items:1,
margin:5,
loop:true,
center:true,
onTranslated: _.bind(this.translated,this),
animateIn: 'fadeInDown', // <-- css3 transition class
animateOut: 'fadeOutDown', // <-- css3 transition class
});
// gets the id of the slide and updates the data
translated: function (){
var currentSlideId = this.$el.find(".owl-item.active > .item").attr('id');
slideModule.loadSlide(currentSlideId);
}
css
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
you can try:
owl-carousel .owl-item { -webkit-transform: translateZ(0) !important; }
hope it help :)
I have two mixins which both convert to -webkit-transform:
.rotate(#deg) {
-webkit-transform: rotate(#deg);
}
.scale(#factor) {
-webkit-transform: scale(#factor);
}
When I use them together:
div {
.rotate(15deg);
.scale(2);
}
... they (as expected) show up as:
div {
-webkit-transform: rotate(15deg);
-webkit-transform: scale(2);
}
This doesn't seem to be valid CSS as the second has precedence over the first; the first is discarded. To combine transform entries it should be:
-webkit-transform: rotate(15deg) scale(2);
How can I accomplish such CSS to be generated by LESS, i.e. multiple transform entries that are combined correctly?
Starting from Less v1.7.0, merging property values with a space separator is possible and there is no need to club the two mixins into one.
The below Less code
.rotate(#deg) {
-webkit-transform+_: rotate(#deg);
}
.scale(#factor) {
-webkit-transform+_: scale(#factor);
}
div{
.rotate(45deg);
.scale(1.5);
}
will compile into the following CSS:
div {
-webkit-transform: rotate(45deg) scale(1.5);
}
Provide your transforms as arguments for a single mixin:
.transform(#scale,#rotate) {
-webkit-transform: #arguments;
}
I guess, you also could achieve to concatenate your separate mixins into one with the help of guards, but I'm not entirely sure;)
I think you are not able to achieve this in another way, since the parser would have to modify code afterwards which should not be possible.
I think there is a simple way over it, create a div container for the eleemnt, and apply first transform to the cntainer, leaving the second one for the element itself
I was having problems getting #arguments to work. I used the #rest variable which did the trick
LESS example:
.transform(#rest...) {
transform: #rest;
-ms-transform: #rest;
-webkit-transform: #rest;
}
.someClass{
.transform(translate3D(0,0,0),scale(1,1));
}
.otherClass{
.transform(translate3D(0,0,0),rotate(1,1));
}
.anotherClass{
.transform(rotate(1,1));
}
Output CSS:
.someClass {
transform: translate3D(0, 0, 0) scale(1, 1);
-ms-transform: translate3D(0, 0, 0) scale(1, 1);
-webkit-transform: translate3D(0, 0, 0) scale(1, 1);
}
.otherClass {
transform: translate3D(0, 0, 0) rotate(1, 1);
-ms-transform: translate3D(0, 0, 0) rotate(1, 1);
-webkit-transform: translate3D(0, 0, 0) rotate(1, 1);
}
.anotherClass {
transform: rotate(1, 1);
-ms-transform: rotate(1, 1);
-webkit-transform: rotate(1, 1);
}