css3 簡單搖擺動畫。 shake shake

直接上代碼了~


@-webkit-keyframesshake{

2% {

transform:translate(0.5px,-1.5px)rotate(-0.5deg); }

4% {

transform:translate(0.5px,1.5px)rotate(1.5deg); }

6% {

transform:translate(1.5px,1.5px)rotate(1.5deg); }

8% {

transform:translate(2.5px,1.5px)rotate(0.5deg); }

10% {

transform:translate(0.5px,2.5px)rotate(0.5deg); }

12% {

transform:translate(1.5px,1.5px)rotate(0.5deg); }

14% {

transform:translate(0.5px,0.5px)rotate(0.5deg); }

16% {

transform:translate(-1.5px,-0.5px)rotate(1.5deg); }

18% {

transform:translate(0.5px,0.5px)rotate(1.5deg); }

20% {

transform:translate(2.5px,2.5px)rotate(1.5deg); }

22% {

transform:translate(0.5px,-1.5px)rotate(1.5deg); }

24% {

transform:translate(-1.5px,1.5px)rotate(-0.5deg); }

26% {

transform:translate(1.5px,0.5px)rotate(1.5deg); }

28% {

transform:translate(-0.5px,-0.5px)rotate(-0.5deg); }

30% {

transform:translate(1.5px,-0.5px)rotate(-0.5deg); }

32% {

transform:translate(2.5px,-1.5px)rotate(1.5deg); }

34% {

transform:translate(2.5px,2.5px)rotate(-0.5deg); }

36% {

transform:translate(0.5px,-1.5px)rotate(0.5deg); }

38% {

transform:translate(2.5px,-0.5px)rotate(-0.5deg); }

40% {

transform:translate(-0.5px,2.5px)rotate(0.5deg); }

42% {

transform:translate(-1.5px,2.5px)rotate(0.5deg); }

44% {

transform:translate(-1.5px,1.5px)rotate(0.5deg); }

46% {

transform:translate(1.5px,-0.5px)rotate(-0.5deg); }

48% {

transform:translate(2.5px,-0.5px)rotate(0.5deg); }

50% {

transform:translate(-1.5px,1.5px)rotate(0.5deg); }

52% {

transform:translate(-0.5px,1.5px)rotate(0.5deg); }

54% {

transform:translate(-1.5px,1.5px)rotate(0.5deg); }

56% {

transform:translate(0.5px,2.5px)rotate(1.5deg); }

58% {

transform:translate(2.5px,2.5px)rotate(0.5deg); }

60% {

transform:translate(2.5px,-1.5px)rotate(1.5deg); }

62% {

transform:translate(-1.5px,0.5px)rotate(1.5deg); }

64% {

transform:translate(-1.5px,1.5px)rotate(1.5deg); }

66% {

transform:translate(0.5px,2.5px)rotate(1.5deg); }

68% {

transform:translate(2.5px,-1.5px)rotate(1.5deg); }

70% {

transform:translate(2.5px,2.5px)rotate(0.5deg); }

72% {

transform:translate(-0.5px,-1.5px)rotate(1.5deg); }

74% {

transform:translate(-1.5px,2.5px)rotate(1.5deg); }

76% {

transform:translate(-1.5px,2.5px)rotate(1.5deg); }

78% {

transform:translate(-1.5px,2.5px)rotate(0.5deg); }

80% {

transform:translate(-1.5px,0.5px)rotate(-0.5deg); }

82% {

transform:translate(-1.5px,0.5px)rotate(-0.5deg); }

84% {

transform:translate(-0.5px,0.5px)rotate(1.5deg); }

86% {

transform:translate(2.5px,1.5px)rotate(0.5deg); }

88% {

transform:translate(-1.5px,0.5px)rotate(1.5deg); }

90% {

transform:translate(-1.5px,-0.5px)rotate(-0.5deg); }

92% {

transform:translate(-1.5px,-1.5px)rotate(1.5deg); }

94% {

transform:translate(0.5px,0.5px)rotate(-0.5deg); }

96% {

transform:translate(2.5px,-0.5px)rotate(-0.5deg); }

98% {

transform:translate(-1.5px,-1.5px)rotate(-0.5deg); }

0%, 100% {

transform:translate(0,0)rotate(0); }

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 各種純css圖標 CSS3可以實現很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,661評論 0 8
  • 最近想接觸一下php相關知識,需要在mac上搭配php運行環境。其實Mac系統已經內置了Apache和PHP,使用...
    caixin閱讀 4,227評論 1 2
  • 文/金戈莞爾 方木是楠楓建筑事務所的設計師,由于思想敏銳,剛過三十就已在設計圈里小有名氣。只是人長得其貌不揚,所以...
    金戈莞爾閱讀 598評論 0 49
  • 今天有人問我香菇藍瘦什么梗,我說一個男的失戀后發的視頻啊,在里面說:藍瘦,香菇,本來今顛高高興興,泥為什莫要說這種...
    泛閱說本閱讀 503評論 0 1
  • 喬一/文 01 ▼ “你又分手了?活該啊!” 田鵬分手了,這應該是我認識他以來第四次分手了,分手并不可怕,可怕的是...
    喬一是喬一閱讀 746評論 0 1