Menu
I have been playing around with some CSS3 + JavaScript today.
Below you have my code, (was trying to make the world's smallest image fading gallery, don't know if I succeeded).
I am not quite sure how to set the CSS though. See comment questions below:
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
transition:opacity 1s ease-in-out; // Why do we set this?
Maybe the world's smallest JS-Gallery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HB - CSS3 + JS Gallery</title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;text-align:center;font:200px/500px georgia}
#g{background:#000;margin:0 auto;width:960px;height:500px;overflow:hidden}
#g div{
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
opacity:0;position:absolute;height:500px;width:960px;}
</style>
</head>
<body>
<div id="g">
<div style="background:#090">1</div>
<div style="background:#096">2</div>
<div style="background:#963">3</div>
<div style="background:#CC0">4</div>
</div>
<script>
function i(){c[a].style.opacity='1'}function o(){c[a].style.opacity='0'}var g=document.getElementById('g'),c=g.children,l=c.length-1,f=function(){if(a==l){o();a=0;i()}else{o();a++;i()}};a=0;i();setInterval(f,4000);
</script>
</body>
</html>
287
In classic animation, the term for motion that starts slowly and accelerates is "slow in," and for motion that starts quickly and decelerates is "slow out." The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively.
We can't transition height , but we can transition max-height , since it has an explicit value. At any given moment, the actual height of the element will be the minimum of the height and the max-height .
ease-in - specifies a transition effect with a slow start. ease-out - specifies a transition effect with a slow end. ease-in-out - specifies a transition effect with a slow start and end.
Note: As per W3C specification CSS visibility is an animatable property, however, it doesn't animate like other animatable properties.
-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?
If Microsoft have implemented a vendor-specific implementation of transition in Internet Explorer then this will be triggered by the -ms-transition property declaration, assuming that the arguments meet the specification they've implemented.
Can I Use suggests that IE 10 has, indeed, implemented the -ms-transition property, as does the MSDN entry, though it's non-specific as to which version of IE this is implemented in...
transition:opacity 1s ease-in-out; // Why do we set this?
We set this in order that once the standard implementation of transition is finalised and implemented this will override any interim vendor-specific implementations
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
