I was initially using jQuery's slide functions to slide a page out of view (to reveal another page beneath it) in a Cordova app I'm making, and whilst this worked perfect on my desktop browser, it (now understandably) was quite choppy on the actual mobile device. So I found out the reason for this and learnt that I should use CSS3 animations/transitions for mobile devices, and more specifically Translate3d for anything that may require GPU rendering. So I've made those changes like this:
#mainpage{
z-index: 10;
top: 0;
-webkit-transition: all .5s linear;
transition: all .5s linear;
border-bottom: 1px solid #111111;
}
#mainpage.out{
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
and I just toggle the 'out' class as necessary.
The transition runs smoothly until about 50px are left on the screen (or the page has about 50px left to reappear), then it stops for about a second before finishing up. I was wondering if anyone has any suggestion as to why this may be the case or if there's maybe an even more efficient way of doing this.
The device I am using has a nVIDIA Tegra 3 CPU with 12-Core High Performance Graphics.
I think this is not the way you should do the animation.
Try the following:
#mainpage {
z-index: 10;
top: 0;
border-bottom: 1px solid #111111;
-webkit-transition: -webkit-transform .5s linear;
transition: transform .5s linear;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#mainpage.out {
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
First change is, specify the type of the property you want to animate (the transition parameter), not sure what you are animating when you write all.
Second thing, specify the "back" transition with translate3d(0,0,0). Also not sure, if it makes a difference here, though. I hope this helps you.
Related
I am having an issue with Chrome (v. 67) at OSX and movement animations. I've prepared JS fiddle with it:
https://jsfiddle.net/5m173ghv/31/
If you open it at safari it is working very good. But, when you will use chrome it has little lags when moving.
I cannot describe it a bit more... You need to open it and try yourself on the big screen... Please look carefully at white box. You will see that this box has sometimes something like lags or small jumps(?)...
This is very weird. I've tried almost every answer from the internet (trust me ;) ).
I also tried:
Change transforms at animation into position (left)
Change animations into transitions
adding additional parameters (backface-visibility, perspective, will-change...)
Changing sequences of animation to have more steps (per 10%)
Debugging on chrome dev tools (~30-40fps)
Adding transforms like translateZ(0)
You think that this is chrome bug or maybe my fault? Do you have any solution for that?
Here you have code:
HTML
<span class="spark"></div>
SCSS
body {
background-color: black;
}
#keyframes left-to-right {
0% {
transform: translate3d(0,0,0);
}
100% {
transform: translate3d(50vw,0,0);
}
}
.spark {
position: absolute;
top: 30px;
width: 322px;
height: 500px;
background-color: white;
transform: translate3d(0,0,0);
backface-visibility: hidden;
perspective: 1000px;
animation: left-to-right 5s infinite linear;
will-change: transform;
pointer-events: none;
user-select: none;
}
I'm using revolution slider and I'm stuck with a problem. As an example I use the original demo from here: https://revolution.themepunch.com/wordpress-photography-slider.
On the tab 'portfolio' you see images that shrink in size with a transition and look a bit darker when you hover over them. This is what I want as well but I can't figure out how.
In revolution slider you can add classes, ID's and CSS to specific images so what I probably need is a CSS code that makes this possible. I've tried several codes I found online but none of them do the trick because they all come with an html part as well.
My guess was: the image is already there, I don't need the html part, only assign classes or id's to the images and then give each image the same kind of CSS code.
Am I on the right track with this? And can anyone help me with the code for it?
Many thanks in advance!
add a class, then do some css
for example:
<img class="slider-img">
.slider-img:hover {
{
let me know if you need help with the css.
EDIT:
try this.
wrap each of your images around 2 divs, slider-img and img-wrap:
<div class="slider-img">
<div class="img-wrap">
<img src="http://science-all.com/images/wallpapers/stock-image/stock-image-15.jpg">
</div>
</div>
then do some css:
.slider-img {
width: 200px;
cursor: pointer;
}
.slider-img img {
width: 100%;
}
.slider-img:hover .img-wrap {
background-color: black;
transform: scale(0.7);
-o-transform: scale(0.7);
-ms-transform: scale(0.7);
-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.slider-img:hover .img-wrap img{
opacity: 0.5;
}
basically what the css is doing is that when you hover over the main div (.slider-img), the div containing the image (.img-wrap) gets scaled down by 70% by the css -webkit-transform: scale(0.7);
it also gets a background color of black with an opacity of 80%. this gives the darkened image effect.
-webkit-transition: all .5s ease-in-out; gives a smooth transition effect.
if you are wondering why there are 5 different lines of css for the same thing, thats because each line targets specific browsers. -o- is opera, -moz- is firefox etc.
also, make sure to change the .slider-img width to match your needs.
check out the working example on js fiddle:
here
I have a problem in this website:
http://www.bacubacu.com/paybus/
if you hover any of those 3 big round buttons at the bottom the animations works just great (they are absolute).
if you hover where it says "ver historial" the animation jumps to te beginning and stops, even if the "tap" class is still active. I've found out that it is related to the element positioning (being non-absolute).
I have no idea why this is happening, any of you can help me to solve it?
this is the CSS code:
.touch{
transition: transform 0.15s ease-out;
-webkit-transition: -webkit-transform 0.15s ease-out;
}
.touch.tap{
-webkit-transform: scale3D(0.9,0.9,0.9);
}
Ok, I found the answer myself. it gets fixed when adding "display:inline-block" to the anchor element. I didn't know where the problem was, sorry if my question was not too specific (my english doesn't help either hehe).
https://jsfiddle.net/15ryknk5/10/
display:inline-block;
I think you mean click instead of hovering. To hover is to place the cursor over the element. That is a different event than clicking. Also I think your css is wrong. I don't know if you can pass transform as a parameter of a transition. FInally I saw you Jquery and it seems to run on click. Try this code
HTML
<div id="tap_buttom" class="touch">
<p>This is a button</p>
</div>
CSS
.touch{
border-radius: 10px;
background: #ececec;
padding: 10px;
width: 150px;
text-align: center;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
/* Line added by Alvaro Prieto */
display: inline-block
}
.touch.tap
{
-webkit-transform: scale3D(0.9,0.9,0.9);
-moz-transform: scale3D(0.9,0.9,0.9);
-o-transform: scale3D(0.9,0.9,0.9);
-ms-transform: scale3D(0.9,0.9,0.9);
transform: scale3D(0.9,0.9,0.9);
}
jQuery
$(document).ready(function(){
$(this).mousedown(function(){
$("#tap_buttom").addClass("tap")
})// end click function
$(this).mouseup(function(){
$("#tap_buttom").removeClass("tap")
})// end click function
})// end document.ready
You can run this code here https://fiddle.jshell.net/15ryknk5/. I hope this works
I am trying to create a loader animation using CSS3. Here is the code:
http://codepen.io/raaj-obuli/pen/RPeLer
If you look at the code, I've entered the css, in #keyframe defn, for rotating the squares from 0deg to 360deg ( as like below ). But the dices are not rotating. Please help on this and also let me know if you need more details.
#keyframes tilt{
0%{
transform: scale($scaleMin) rotate($rotateStart);
}
50%{
transform: scale($scaleMax);
background: #BC11FF;
box-shadow: 0 0 2px #D467FF;
}
95%,100%{
transform: scale($scaleMin) rotate($rotateEnd);
background: #11A8FF;
box-shadow: none;
}
}
PS. CSS is written using SCSS in the code sample.
It's missing the rotate() in 50% section.
$rotateMid: 225deg;/*added, adjust the value as needed*/
span {
animation: tilt #{$animDuration}s linear infinite; /*changed to linear*/
}
50%{
transform: scale($scaleMax) rotate($rotateMid); /*changed/added*/
}
Updated: http://codepen.io/anon/pen/QbJmbO?editors=110
Differences between the transition timing functions:
ease-in will start the animation slowly, and finish at full speed.
ease-out will start the animation at full speed, then finish slowly.
ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.
ease is like ease-in-out, except it starts slightly faster than it ends.
linear uses no easing.
Source: https://stackoverflow.com/a/9636239/483779
I have a simple animation like this:
.elem:hover {
-webkit-transform: scale(1.3);
-webkit-transition: all .4s;
}
When I hover, it scales correctly. But just when it was about to finish, it suddenly pops back to the former size and then snaps to the completed scaled up version.
How do I fix this?
You have it a little bit wrong, you have to set the attributes a little differently:
.elem { -webkit-transition: all .4s ease-in-out; }
.elem:hover { -webkit-transform: scale(1.3); }
You need to set the animation attributes on the element itself, and then the action on the hover :)
Working example (Webkit browsers only).