I have a serious problem with Internet explorer.
I really need to use the scale function in my CSS, but the quality of the video is totally deteriorated.
It works fine with Chrome (and Firefox i think) but not with IE.
Are there any tips to make this better ?
I saw some css tips to change the quality of images but this doesn't work with videos.
Here is a code test (put the cursor over the video to scale it): http://jsfiddle.net/MxxAv/145/
HTML:
<video autoplay id="video" src="http://www.html5videoplayer.net/videos/toystory.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
CSS
#video {
width: 200px;
height: 113px;
}
#video:hover {
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform: scale(2.3);
-webkit-transform: scale(2.3);
}
Thanks for your help !
Adding an original scale may help. Also, for cross-browser support, it helps to use all of the vendor prefixes. Notice, I moved the commands with no prefix to the bottom. Browsers apply the last usable command, so if a browser needs the prefix, you can simply move the prefixed command to the bottom. I added the vendor prefixes and scale to your code, and a duration just for kicks :)
#video {
width: 284px;
height: 160px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
#video:hover {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(2.8);
-moz-transform: scale(2.8);
-ms-transform: scale(2.8);
-o-transform: scale(2.8);
transform: scale(2.8);
}
Related
What is the best way to make a div rotate on click, but with a transition?
I tried this but it only makes a smooth transition when class is added but not when class is removed :
js :
$('#firstDiv' + id).click(function(){
$("#Img" + id).toggleClass('rotated');
});
css :
.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.1s linear;
}
transition css property should stay on the element.
transition property is what makes makes the rotation look smooth. When it's on the class which is doing the rotation and you remove the class, even the transition property gets removed. Hence the rotation end is not smooth.
Your logic is right but use may be a different class to apply -webkit-transition: all 0.1s linear; or apply directly on the element. Make sure it is not removed when you remove rotated class.
const myDiv = $('#my-div');
setTimeout(()=>{
myDiv.addClass('rotated');
}, 1000);
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s linear;
}
.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='my-div'>
</div>
Just use transition-duration property on the target :
$('#firstDiv').click(function() {
$(this).toggleClass('rotated');
});
#firstDiv {
width: fit-content;
transition-duration: 2s; /* <-- Provide a smooth animation from 2s on all 'changes'*/
}
.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.1s linear;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="firstDiv">
test
</div>
how can I use some animation on dropdowns?
Take a look on stripe.com footer and click on location or language links. I've record a video of this effect:
https://www.youtube.com/watch?v=WV0h2zlE7fQ or worse GIF version http://g.recordit.co/w1S4fSrUBA.gif
It would be nice if some of those libs can be used:
Dynamics.js
Animate.css
My external html/js/css coder told me, that is impossible due fact, that Bootstrap 4 use transform property for positioning of dropdown menu itself.
Prepered jsfiddle with default bootstrap setup. https://jsfiddle.net/7hq03Lov/4/
Additional question - can be some any other animation applied on modal too?
You can do it via css, Change as per your need.
.dropdown .dropdown-menu{
-webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) alternate both;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
I have a basic loading animation. It is supposed to run when a user clicks on an upload button.
Now it works perfectly in Chrome and UC Browser. But it isn't working in Safari and Opera Mini. I must support these browsers too.
First time developing such stuff, hence confused about where am I going wrong. Is it my CSS which isn't working is it that my jQuery isn't executing?
My HTML code:
{{ form.photo1 }}
<div class="loader">
<div class="spinner"></div>
aik min</div>
<input type="submit" class="UploadBtn btn bl cl bco mbs mts" style="border-color:#f57c00;" value="Upload">
My CSS code:
.loader {
font-size: 20px;
font-family: serif;
color: #00C853;
display: none;
}
.spinner {
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #FFA000;
border-right: 5px solid #00C853;
border-bottom: 5px solid #FF9933;
border-left: 5px solid #00C853;
width: 50px;
height: 50px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
display: none;
}
#-webkit-keyframes spin {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(0deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(360deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
}
#-o-keyframes spin {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(0deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(360deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(0deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* added vendor specific css (IE) */
-webkit-transform: rotate(360deg);
/* added vendor specific css (Safari, Opera , Chrome) */
}
}
My jQuery code:
$(document).ready(function() {
$(document).on("click", ".UploadBtn", function(event) {
$(".p").each(function(file) {
if ($(this).val()) {
$(".loader").show();
$(".spinner").show();
$("#overlay").show();
}
})
});
});
Please note that 'p' class is for {{ form.photo1 }} which is written in Django.
According to Can I use animation and transform is not supported in Opera mini and very old versions of Safari. Therefore your only chance is to fallback to JS animations in those browsers or better use an animated gif as a loading animation.
I've implemented a featherlight lightbox to display alerts which is working; I am trying to include a loading spinner, but I have a couple of issues:
1) The spinner does not animate in IE, despite not using any incompatible methods
2) The circle appears as an ellipse, despite the height and width being equal
JSFiddle: http://jsfiddle.net/JNsu6/15/
This CSS is recommended on the official site:
https://github.com/noelboss/featherlight/wiki/Add-a-CSS-Only-Loader
#-webkit-keyframes featherlightLoader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes featherlightLoader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.featherlight-loading .featherlight-content {
-webkit-animation: featherlightLoader 1s infinite linear;
animation: featherlightLoader 1s infinite linear;
background: transparent;
border: 8px solid #8f8f8f;
border-left-color: #fff;
border-radius: 80px;
width: 80px;
height: 80px;
min-width: 0;
}
.featherlight-loading .featherlight-content > * {
display: none !important;
}
.featherlight-loading .featherlight-close,
.featherlight-loading .featherlight-inner {
display: none;
}
IE compatability is required, so alternatively if anyone could show me how to simply display a loading GIF using the featherlight loading class instead, that would be appreciated.
I have made an example of a card flip in JSFiddle for AngularJS.
It works perfectly in Chrome.
It works OK in Firefox.
It sort of works in IE, but not properly.
As soon as I remove the perspective css rule it works perfectly (with no perspective). If I add the -webkit- and -ie- rules it still doesn't work. IS THIS A BUG I IE.
I have used the ng-enter and ng-leave to make the transitions etc. Check JSFiddle for full code.
.serviceRoll{
margin:32px;
position: relative;
height:150px;
width:215px;
perspective:800px;
}
.rollInner {
background-color:lightgrey;
padding-top:50px;
height:100px;
width:215px;
text-align:center;
font-size:2em;
border-radius: 16px;
}
.roll {
position: absolute;
}
.roll.ng-enter {
-webkit-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 1;
}
.roll.ng-enter.ng-enter-active {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.roll.ng-leave {
-webkit-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: -1;
}
.roll.ng-leave.ng-leave-active {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
Where you have -webkit- also add a css rule for -ms- as well. You have added these rules in for webkit browsers but not for non-webkit browsers. Take a few of your css rules as an example. Something like this -
.roll.ng-enter {
-webkit-transition:0.25s ease all;
-ms-transition:0.25s ease all;
transition:0.25s ease all;
-ms-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 1;
}
.roll.ng-enter.ng-enter-active {
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.roll.ng-leave {
-webkit-transition:0.25s ease all;
-ms-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: -1;
}
You get the idea :)
Hope this helps!