- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 4003
Full explanation you can see here, as much as I understand, for Chrome, Safari, Opera and FireFox syntax is:
-webkit-transition
for Internet Explorer syntax is:
transition
I will show example just for Chrome.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
<div id="parentDiv">
I belong to the parent
</div>
</body>
</html>
CSS:
#parentDiv {
border-style: solid;
border-width: 5px;
height: 100px;
width: 100px;
-webkit-transition: height 15s;
}
#parentDiv:hover {
height: 8000px;
}
Notice line:
-webkit-transition: height 15s;
here we said that we want to see transition for height, and line:
#parentDiv:hover
Here we are changing height when we come with mouse over.
Example:
I belong to the parent
---
Event which we can use is "webkitTransitionEnd".For example, HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="index.css"> <script type="text/javascript" src="jquery-2.1.3.js"></script> <script type="text/javascript" src="index.js"></script> </head> <body> <div id="main"> <div id="maxHeightDiv"> Main div with max height <div id="nestedDiv"> Div which is going to move </div> </div> </div> </body> </html>CSS:
div {
overflow-y: auto;
}
#maxHeightDiv {
min-height: 100px;
max-height: 100px;
width: 100px;
overflow-y: auto;
padding: 60px 0 0 0;
}
#nestedDiv {
overflow-y: auto;
border: 2px solid #a1a1a1;
height: 40px;
-webkit-transition: height 2s;
}
#nestedDiv:hover{
height: 100px;
-webkit-transition: height 2s;
}
#maxHeightDiv::-webkit-scrollbar {
display: none;
}
JS:
function myScroll() {
$('#maxHeightDiv').scrollTop(10000);
}
window.onload = function () {
$("#nestedDiv").on("webkitTransitionEnd", function () {
myScroll();
});
}
Hover with mouse over "Div which is going to move", and wait a little bit. Real life example:
Main div with max height
Div which is going to move
As you can see scroll will happen only when transition is over.
- Details
- Written by: Stanko Milosev
- Category: CSS3
- Hits: 4644
One example of animation in CSS3 (taken from here):
div {
content:url("myImage.png");
-webkit-animation: myfirst 1s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from{
opacity: 0;
-webkit-transform: rotate(0deg);
}
to{
opacity: 1;
-webkit-transform: rotate(90deg);
}
}
Example you can download here.
---
To know if animation has ended you can use this code:
window.onload = function () {
document.getElementById("myDiv").addEventListener("webkitAnimationEnd", AnimationListener, false);
}
function AnimationListener() {
alert("Animation has ended")
}
Notice webkitAnimationEnd, this will most problably work just in Chrome, for other browser you should some of these events: oanimationend msAnimationEnd animationend
or simply use jQuery like:
window.onload = function () {
$("div").on("webkitAnimationEnd oanimationend msAnimationEnd animationend",
function(e) {
alert("Animation has ended");
})
}
---
To restart your animation you can use code like this:
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/jquery-2.1.1.js"></script> <script type="text/javascript" src="/index.js"></script> <link href="/index.css" rel="stylesheet" type="text/css"></link> </head> <body> <div class="myCssClas"></div> <button style="top:400px;position:absolute">Restart</button> </body> </html>
JS:
window.onload = function () {
$("button").click (function() {
var el = $("div"),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
}
CSS:
div {
content:url("myImage.png");
-webkit-animation: myfirst 1s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from{
opacity: 0;
-webkit-transform: rotate(0deg);
}
to{
opacity: 1;
-webkit-transform: rotate(90deg);
}
}
---
To force animation to stay on last position, use:
-webkit-animation-fill-mode: forwards;
---
One more example of animation using pure JS - no jQuery or any other framework.
HTML:
<!DOCTYPE html> <html> <head> <link type="text/javascript" rel="stylesheet" href="/index.css"> <script type="text/javascript" src="/index.js"></script> </head> <body> <div id="animationOne">Animation one</div> <div id="animationTwo" class="withoutAnimationTwo">Animation two</div> <button id="animationTwoStart">Animation two - start</button> </body> </html>
CSS:
#animationOne {
position: relative;
left: 0px;
top: 0px;
color: red;
-webkit-animation: animationOne 1s;
-webkit-animation-fill-mode: forwards;
}
.withoutAnimationTwo {
position: relative;
color: green;
left: 0px;
top: 0px;
}
.animationTwo {
position: relative;
color: green;
left: 0px;
top: 0px;
-webkit-animation: animationTwo 1s;
}
@-webkit-keyframes animationOne {
from {
left: 0px;
}
to {
left: 1000px;
}
}
@-webkit-keyframes animationTwo {
from {
left: 0px;
}
to {
left: 1000px;
}
}
JS:
window.onload=function () {
document.getElementById("animationTwoStart").addEventListener("click", function () {
document.getElementById("animationTwo").className = 'withoutAnimationTwo';
//this set time out I need to restart the animation
setTimeout(function() {
document.getElementById("animationTwo").className = "animationTwo";
}, 10);
});
}
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: Chrome
- Hits: 2277
