I am using a slider plugin (http://roundsliderui.com/) and added additional elements to have a custom fill image. In Chrome, the transitions that happen when the slider is clicked are not synchronized even though the settings are the same. It only seems to happen in Chrome, and is worse on mobile. I am targeting Android with the Crosswalk webview, so it will affect all users, especially slower phones.
The plugin has one element that rotates the handle, and I add one child to clip the fill image (.rs-range-clip-custom, no transform) with a child that rotates back to vertical to hold the fill image as a background (.rs-range-custom). It is very noticeable for the actual images, since the fill will either leave a gap at the end or extend past the end of the track depending on the direction it is moving.
.rs-animation .rs-transition {/* plugin css */
transition: all .5s linear 0s;
}
.rs-animation .rs-range-custom {/* my css */
transition: transform 0.5s linear;
}
You can view a simplified version of the slider at http://codepen.io/MalikDrako/pen/XjbaWR
How can I ensure the two animations are synchronized?
Here i have customized the roundSlider in sample level to achieve your requirement.
In the below demo i have added an additional SVG element as range to apply the image for that. Please check the below demo, which demonstrate your requirement:
http://jsbin.com/debiyu/edit?html,output
For better understanding I have applied some other png images in the below demo, check that:
http://jsbin.com/henola/1/edit?html,output
From here you can customize further based on your requirement. I hope this helps you.. Please let me know your comments.
Related
I'm building an accessible accordion using a definition list. I have this working well, where the <dt> contains a <button> which when clicked toggles an aria-expanded from true/false and toggles a hidden attribute on the corresponding <dd>. There's other things going on for accessibility but that's the basics for the list and the show/hide.
The show/hide display of the dd is then controlled via a hidden attribute selector (in this case, this is coming from the bootstrap stylesheet):
[hidden] {
display: none!important;
}
The show/hide functionality right now is a hard show/hide and I'm trying to add a nice animation via css transitions (this needs to work in IE11 where transitions are supported.)
I built a simple POC for the animation at http://jsfiddle.net/jokvqy6u/ which just toggles a show and hide class. This was just something I could quickly throw together and send out to our marketing team to illustrate the animation to get feedback on.
I thought I'd be able to just easily add hidden and :not(hidden) selectors to the POC and it would work just fine, then I could retrofit into the real accordion, but the animation doesn't seem to work with hidden attributes on the html. You can see a demo of that at http://jsfiddle.net/6zmdhqrn/2/ where the 2nd item animates because it does not have a hidden attribute. Items 1 and 3 have hidden attributes and do not even open up.
Does anyone know why this is happening and how I can get my transitions working with hidden attributes?
EDIT I have it sort of half working at http://jsfiddle.net/6zmdhqrn/3/ by overriding the [hidden] selector coming from bootstrap with some important statements. I still get a hard show, but the hide slides up. I suspect it has to do with the element being display:none where the animations have no dimensions/info to start animating from? Still looking for info/tips on how to get the opening animation.
You guessed right, the problem here is display isn’t an animatable CSS property.
You need to base your animation on an animatable property, such as opacity for example.
Here’s a quick demo:
const el = document.querySelector('div');
document.querySelector('button').addEventListener('click', () => {
if (el.classList.contains('visible'))
el.classList.remove('visible');
else
el.classList.add('visible');
})
div {
opacity: 0;
transition: opacity 0.3s ease;
}
.visible {
opacity: 1;
}
<div class="visible">some content!</div>
<button>toggle visibility</button>
As you may have noticed, setting the opacity to 0 doesn’t hide the element completely (i.e. it still takes up space). In case this is something undesirable, you may consider animating a different property, such as width or height.
I have to make an animation with css. A logo flying and enlarging into the front based on a curved path or parabola. I made a small sketch.
The logo is staring small top right, flying and getting larger and is ending left center.
Sketch
I found a lot of informations about cubic-bezier also cubic-bezier editors, but unfortnatelly I am not able to realize this.
The html
<div class="animation"><img src="logo.jpg"></div>
The css
.animation {
transition: all 500ms cubic-bezier(0.725, -0.385, 0.970, 0.465);
transition-timing-function: cubic-bezier(0.725, -0.385, 0.970, 0.465);
}
This was one (of several) trys but the logo isn't animated. Besides, if I understand it, that is only the path without scaling.
Where is my thinking error?
Thanks a lot & regards!
First, cubic-bezier is a timing function, not a "path" function. It's not going to accomplish what you are after.
Second, to accomplish what you desire, use the CSS3 matrix transition property in conjunction with a custom animation function with a custom step callback. Either that, or adjust CSS properties like top, left, height, and width directly with said animation function.
Good luck!
I am trying to apply a Minecraft-like style to a div element. The end result should look something like the "if not ok then return end" message:
Quick sidenote: For those of you who haven't played the game, a random line from a specific file is read and it's contents are displayed as the message of the day. It throbs in and out and grabs your attention.
The text shadow, font, and throbbing animation has already been done. However, when I try to apply the second animation, it overrides the throbbing animation (meaning it does not throb, but is rotated)
My CSS is as follows:
#random-message {
/* font/text stuff */
animation:minecraft, minecraft-rotate 0.5s infinite;
-webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */
}
The animation minecraft applies a transform: scale effect, and minecraft-rotate applies a transform: rotate effect.
What would be the best way to implement a rotation effect without overriding my throbbing effect?
You don't want to have a rotation animation...you want to rotate the div. Simply add transform: rotate(340deg); line to the css block.
Any given element can have only one transform at any given time. Any attempt to set at the same time 2 transforms will result in one of them being overriden.
You can:
1) set two divs, one inside the other, and apply a different transform to the parent and to the child.
2) build the composite transform. In the case of an animation, that means creating composite transforms for each frame.
I've created a page that has content showing & hiding based on the device orientation, however I find that there's somewhat of a jump/lag when you rotate and the content shows/hide.
Is it possible to animate a smoother transition between lelements showing/hiding using just css?
For the elements that animate in and out of view, you can use transition-property: all; and transition-duration: 1s; (or whatever duration you'd like) to fade in/slide in said elements. Of course those CSS properties will need to be prefixed in some browsers.
I applied the following CSS transform to an HTML input box.
-webkit-transform: scale(.5);
When I type text into the input box until it has filled the visible area, the caret continues past the edge of the input and is hidden. Normally the caret and the text would scroll as you type.
The text does eventually start scrolling once the caret has gone the width of the pre-scaled input. The browser seems to be ignoring the scaling when calculating when to scroll the text.
This is only an issue with WebKit browsers (tested with Chrome and iPad). The -moz-transform equivalent works fine in FireFox. The zoom property works fine in webkit, but it isn't nearly smooth enough when scaling on the iPad, so I can't really use it for my project.
You can see an example here: http://jsfiddle.net/4Kv6w/
The first input box is with the -webkit-transform scaling. The second box is with zoom set. The third is normal.
Any help would be greatly appreciated.
EDIT - You can also get the problem without scaling, by using -webkit-transform to move the input box to the left. Here's an example: http://jsfiddle.net/4Kv6w/15/
It seems there is a bug in WebKit when using a CSS transform to move an input box to the left. When you scale down an input box, it essentially moves the right edge to the left, which is how I was experiencing the problem.
The workaround for me was to position the input box way to the left
left: -2000px;
position: absolute;
and then move it back with the CSS transform.
-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0);
You can see an example here: http://jsfiddle.net/4Kv6w/17/
Hey I'm assuming you're trying to animate the change. You will probably have better results using CSS transitions instead of a transform if that's the case. I've created a fiddle for you to see and try it out for yourself.
jsfiddle
Basically, I have a js event listener listening for when the textbox gets focus. Then I change the width in the js and the transition takes care of the animation. Hopefully this takes care of your issue.