|
#skew { transform:skew(35deg); } #scale { transform:scale(1,0.5); } #rotate { transform:rotate(45deg); } #translate { transform:translate(10px, 20px); } #rotate-skew-scale-translate { transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); } #transDemo4:hover #rotateX { transform:rotateX(180deg); } #transDemo4:hover #rotateY { transform:rotateY(180deg); } #transDemo4:hover #rotateZ { transform:rotateZ(180deg); } $(document).ready(function() { $("#cf_onclick").click(function() { $("#cf2 img.top").toggleClass("transparent"); }); }); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; $('.movable').click(function() { $(this).css('left','200px'); }); http://desandro.github.io/3dtransforms/ darielnoel'S @keyframes daneden'S @keyframes kirupa 'S tutorial Rocket @keyframes <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> .play{ <script> |
.{
-webkit-animation-name:;}
@-webkit-keyframes { // -webkit-transform
% {-webkit-transform: translateX(px) translateY(px);opacity:1.0;}
}
@-moz-keyframes {//-moz-transform
% {-moz-transform: translateX(px) translateY(px);opacity:1.0;}
}
@-o-keyframes {// -o-transform
% {-o-transform: translateX(px) translateY(px);opacity:1.0;}
}
@keyframes {
% {transform: translateX(px) translateY(px);opacity:1.0;}
}
/* -------------------- END -------------------- */
<div class="" ></div>
<img class="" src="http://mooseloose.com/images/moose.png" />
<div id="banner">
<img class="" src="http://mooseloose.com/images/moose.png">
</div>
Click for CSS animatable properties
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skew(30deg, 20deg)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.moosebutt {
background-color: #db6600;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
color: #ffffff;
border:1px solid #db6600;
}
.moosebutt:hover {
background-color: #000000;
border:1px solid #000000;
}
.pause {
border:1px solid red;
animation-play-state: paused ;
}
</style>
<button class="Stop moosebutt" value="Stop">Stop</button>
<button class="Start moosebutt" value="Start">Start</button>
<script>
$(document).ready(function(){
$(".Stop").click(function(){
$(".").addClass("pause");
});
});
$(document).ready(function(){
$(".Start").click(function(){
$(".").removeClass("pause");
});
});
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
style="cursor:pointer" data-toggle="modal"data-target="#myModal01"
<button style="padding:0px; border:0px" data-toggle="modal"data-target="#myModal01"> </button>
<div class="modal fade" id="myModal01" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
</div>
</div>