From b43903561f7872efe1acb2df8895ef5da49e993d Mon Sep 17 00:00:00 2001 From: yamat0jp Date: Fri, 16 Dec 2016 19:21:17 +0900 Subject: [PATCH] -webkit- -ms- css rotate animation --- pybbs/title.htm | 6 ------ static/js/main.js | 38 ++++++++++++++++++++++++++------------ 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/pybbs/title.htm b/pybbs/title.htm index 425c273..55f4fcb 100644 --- a/pybbs/title.htm +++ b/pybbs/title.htm @@ -1,12 +1,6 @@ Titles - diff --git a/static/js/main.js b/static/js/main.js index 7903644..2f1bf48 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -3,19 +3,33 @@ arg = { 'font-size':'2em', 'transform':'rotate(5deg)' }; -narg = { - 'font-size':'initial', - 'transform':'initial' -}; $(function(){ $('div').on('click',function(){ - $(this).css(arg); - }) - .on('mouseout',function(){ - $(this).css(narg); - }) - .on('mousemove',function(){ - $(this).css(narg); + var $title = $(this), + span1 = 1500, + span2 = 200; + $title.css(arg); + $({deg:5}).animate({deg:365},{ + duration:500, + progress:function(){ + $title.css({ + '-webkit-transform':'rotate('+this.deg+'deg)', + '-ms-transform':'rotate('+this.deg+'deg)', + 'ransform':'rotate('+this.deg+'deg)' + }); + } + }); + $({deg:5}).delay(span1).animate({deg:0},{ + duration:span2, + progress:function(){ + $title.css({ + '-webkit-transform':'rotate('+this.deg+'deg)', + '-ms-transform':'rotate('+this.deg+'deg)', + 'transform':'rotate('+this.deg+'deg)' + }); + } + }); + $title.delay(span1+span2).animate({'font-size':'1em'},1); }); -}); \ No newline at end of file +}); -- 2.11.0