Prev Demo
Easing Effects In CSS 3
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html /> <html> <head> <title></title> <meta charset="UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> /* width, opacity, position, font-size */ .class1Ease { padding: 5px; background-color: yellow; font-size:smaller; border:1px solid red; display:block; width:150px; margin-top:20px; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; /*transition: background 0.7s ease; */ } .class1EaseIn { padding: 5px; background-color: yellow; font-size:smaller; border:1px solid red; margin-top:20px; display:block; width:150px; -webkit-transition: all 0.7s ease-in; -moz-transition: all 0.7s ease-in; -o-transition: all 0.7s ease-in; transition: all 0.7s ease-in; /*transition: background 0.7s ease; */ } .class1EaseOut { padding: 5px; background-color: yellow; font-size:smaller; border:1px solid red; display:block; width:150px; margin-top:20px; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; /*transition: background 0.7s ease; */ } .class1EaseInOut { padding: 5px; background-color: yellow; font-size:smaller; border:1px solid red; display:block; width:150px; margin-top:20px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; /*transition: background 0.7s ease; */ } .aHover { background-color: blue; color:White; font-size:larger; margin-left:200px; } </style> </head> <body> <h4>Understand difference between different easing effect in CSS 3</h4> <a id="a1" href="http://www.techfunda.com" class="class1Ease">TechFunda.com</a> <br /> <a id="a2" href="http://www.techfunda.com" class="class1EaseIn">TechFunda.com</a> <br /> <a id="a3" href="http://www.techfunda.com" class="class1EaseOut">TechFunda.com</a> <br /> <a id="a4" href="http://www.techfunda.com" class="class1EaseInOut">TechFunda.com</a> <br /> <p> <input type="button" onclick="ChangeCSS('0')" value="Ease" /> <input type="button" onclick="ChangeCSS('1')" value="Ease In" /> <input type="button" onclick="ChangeCSS('2')" value="Ease Out" /> <input type="button" onclick="ChangeCSS('3')" value="Ease In Out" /> <br /><br /> <input type="button" onclick="ChangeCSS('4')" value="Change All" /> (All animations should be in the home position - Refresh the page) </p> <script type="text/javascript"> function ChangeCSS(id) { switch (id) { case "0": $("#a1").addClass("aHover"); break; case "1": $("#a2").addClass("aHover"); break; case "2": $("#a3").addClass("aHover"); break; case "3": $("#a4").addClass("aHover"); break; default: $("#a1").addClass("aHover"); $("#a2").addClass("aHover"); $("#a3").addClass("aHover"); $("#a4").addClass("aHover"); break; } } </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output