Created
March 29, 2012 06:33
-
-
Save hussienliban/2234163 to your computer and use it in GitHub Desktop.
ios delete animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| article, aside, figure, footer, header, hgroup, | |
| menu, nav, section { display: block; } | |
| body{ | |
| background:url("http://dabblet.com/img/noise.png") repeat scroll 0 0%, -moz-linear-gradient(left center , #ECE7E3 1px, transparent 1px) no-repeat scroll 2.8em 0 #F4F1EF; | |
| } | |
| .point{ | |
| display: inline-block; | |
| background: #23A8EF; | |
| width: 150px; | |
| height: 100px; | |
| border-radius: 8px; | |
| margin: 100px 0px 0 40px; | |
| box-shadow:0 1px 0 #E8FEFF,inset 0 2px 1px rgba(0,0,0,0.2); | |
| position: relative; | |
| color: white; | |
| font: normal 18px/90px verdana; | |
| text-align: center; | |
| -moz-transition: background 0.2s linear; | |
| } | |
| .activated{ | |
| -moz-animation: delete 0.4s infinite; | |
| box-shadow:inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.3); | |
| background: #26B4FF; | |
| } | |
| .delete{ | |
| opacity: 0;-moz-transition: all 0.1s linear; | |
| position: absolute; | |
| display: inline-block; | |
| right: 5px; | |
| top: 5px; | |
| font: bold 36px/11px 'Entypo'; | |
| color: #eee; | |
| text-shadow: 0 0.5px 0 #FF1C1C; | |
| text-decoration: none; | |
| background: #FF1C1C; | |
| border-radius: 50px; | |
| height: 20px; | |
| width: 20px; | |
| text-align: center; | |
| box-shadow: 0 1px 0 #FFCBCB; | |
| text-shadow: 0 1px 0 #666; | |
| } | |
| .activated .delete{opacity: 1;} | |
| @-moz-keyframes delete { | |
| 0%{-moz-transform: rotate(0deg)} | |
| 33%{ -moz-transform: rotate(-3deg)} | |
| 66%{-moz-transform: rotate(3deg) scale(1.01) } | |
| 99.99%{-moz-transform: rotate(0deg)} | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| article, aside, figure, footer, header, hgroup, | |
| menu, nav, section { display: block; } | |
| body{ | |
| background:url("http://dabblet.com/img/noise.png") repeat scroll 0 0%, -moz-linear-gradient(left center , #ECE7E3 1px, transparent 1px) no-repeat scroll 2.8em 0 #F4F1EF; | |
| } | |
| .point{ | |
| display: inline-block; | |
| background: #23A8EF; | |
| width: 150px; | |
| height: 100px; | |
| border-radius: 8px; | |
| margin: 100px 0px 0 40px; | |
| box-shadow:0 1px 0 #E8FEFF,inset 0 2px 1px rgba(0,0,0,0.2); | |
| position: relative; | |
| color: white; | |
| font: normal 18px/90px verdana; | |
| text-align: center; | |
| -moz-transition: background 0.2s linear; | |
| } | |
| .activated{ | |
| -moz-animation: delete 0.4s infinite; | |
| box-shadow:inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.3); | |
| background: #26B4FF; | |
| } | |
| .delete{ | |
| opacity: 0;-moz-transition: all 0.1s linear; | |
| position: absolute; | |
| display: inline-block; | |
| right: 5px; | |
| top: 5px; | |
| font: bold 36px/11px 'Entypo'; | |
| color: #eee; | |
| text-shadow: 0 0.5px 0 #FF1C1C; | |
| text-decoration: none; | |
| background: #FF1C1C; | |
| border-radius: 50px; | |
| height: 20px; | |
| width: 20px; | |
| text-align: center; | |
| box-shadow: 0 1px 0 #FFCBCB; | |
| text-shadow: 0 1px 0 #666; | |
| } | |
| .activated .delete{opacity: 1;} | |
| @-moz-keyframes delete { | |
| 0%{-moz-transform: rotate(0deg)} | |
| 33%{ -moz-transform: rotate(-3deg)} | |
| 66%{-moz-transform: rotate(3deg) scale(1.01) } | |
| 99.99%{-moz-transform: rotate(0deg)} | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>iso delete animation</title> | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>iso delete animation</title> | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <div class='point'>～だけあって<a class='delete' href='#'>X</a></div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function( window,$,undefined ){ | |
| var config = { | |
| _active : false, | |
| _activate: function() { | |
| this._clear(); | |
| var self = this; | |
| this._timeoutID = window.setTimeout(function(msg) { if(!self._active){$('.point').addClass('activated'); self._active = true;}}, 1800); | |
| console.log('done'); | |
| }, | |
| _clear: function() { | |
| if(typeof this._timeoutID == "number") { | |
| window.clearTimeout(this._timeoutID); | |
| delete this._timeoutID; | |
| } | |
| }, | |
| _deactivate: function() { | |
| if(this._active){ | |
| this._active = false; | |
| $('.point').removeClass('activated'); | |
| } | |
| } | |
| }; | |
| $('.point').hover( function(e) { | |
| var $self = $(this); | |
| if(!config._active) { | |
| config._activate(); | |
| } | |
| },function(){ | |
| config._clear(); | |
| }); | |
| $('body').on('click', function(e){ | |
| config._deactivate(); | |
| }); | |
| $('.point').find('a').on('click', function(e){ | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| console.log($(this).parent()); | |
| }); | |
| })(window, jQuery); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function( window,$,undefined ){ | |
| var config = { | |
| _active : false, | |
| _activate: function() { | |
| this._clear(); | |
| var self = this; | |
| this._timeoutID = window.setTimeout(function(msg) { if(!self._active){$('.point').addClass('activated'); self._active = true;}}, 1800); | |
| console.log('done'); | |
| }, | |
| _clear: function() { | |
| if(typeof this._timeoutID == "number") { | |
| window.clearTimeout(this._timeoutID); | |
| delete this._timeoutID; | |
| } | |
| }, | |
| _deactivate: function() { | |
| if(this._active){ | |
| this._active = false; | |
| $('.point').removeClass('activated'); | |
| } | |
| } | |
| }; | |
| $('.point').on('hover', function(e) { | |
| var $self = $(this); | |
| if(!config._active) { | |
| config._activate(); | |
| } | |
| }); | |
| $('body').on('click', function(e){ | |
| config._deactivate(); | |
| }); | |
| $('.point').find('a').on('click', function(e){ | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| console.log($(this).parent()); | |
| }); | |
| })(window, jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment