CSS3 Animation 基於 less 構建的 css3 動畫庫

時間 2019-11-29

標籤 css3 css animation 基於構建動畫欄目 CSS 简体版

原文原文鏈接

LESS動畫優勢

· 快速開發css3動畫css

· 採用less mixins寫法，不會生成冗餘css前端

· 已加入主流瀏覽器前綴，保證最大兼容性css3

· LESS-Animation 部分mixins支持傳參，自定義動畫幅度git

（PS：sublime的less2css插件可能不支持編譯本庫的一些新寫法，建議使用官方less編譯、考拉、前端構建工具等方式編譯。交流羣：145423956）github

使用方法

本less文件主要包含兩個功能：LESS-Prefixer和LESS-Animation。web

· 下載 _animation.less 文件，git地址：瀏覽器

git@github.com:w3cmark/css3.git

· 在主less文件引入_animation.lesscss3動畫

@import "_animation.less";

LESS-Prefixer

LESS-Prefixer是一組LESS mixins，可讓你在寫css3時，去掉書寫各個瀏覽器的前綴，簡化代碼書寫。less

如何使用

· 假如你寫css3的transition：前端構建

div{
  -webkit-transition:all 0.2s ease-out;
  -o-transition:all 0.2s ease-out;
  -ms-transition:all 0.2s ease-out;
  -moz-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
}

· 引入 _animation.less 後的寫法：

div{
  .transition(all 0.2s ease-out);
}

支持的屬性

.transition(@arg)
.transition-delay(@delay)
.transition-duration(@duration)
.transition-property(@property)
.transition-timing-function(@function)
.transition-delay(@delay)
.transition-delay(@delay)
.transform(@arg)
.transform-origin(@args)
.transform-style(@style)
.rotate(@deg)
.scale(@factor)
.translate(@x,@y)
.translate3d(@x,@y,@z)
.translateHardware(@x,@y)
.animation(@arg)
.animation-delay(@delay)
.animation-direction(@direction)
.animation-duration(@duration)
.animation-fill-mode(@mode)
.animation-iteration-count(@count)
.animation-name(@name)
.animation-play-state(@state)
.animation-timing-function(@function)
.flex(@arg)
.flexbox()
.opacity(@number)
.box-shadow(@arg)
.box-sizing(@arg)
.border-color(@arg)
.border-image(@arg)
.border-radius(@arg)
.background-origin(@arg)
.background-clip(@arg)
.background-size(@arg)
.columns(@args)
.column-count(@count)
.column-gap(@gap)
.column-width(@width)
.column-rule(@args)
.gradient(@default, @start, @stop)
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2)
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3)
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4)
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2)
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3)
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4)

LESS-Animation

mixin直接引用

LESS-Animation 是一個基於less，集成一些基礎動畫的庫（所包含的動畫能夠在上面效果預覽），直接調用相應的動畫mixins便可。

動畫幀名和mixin名一致，方便調用。

· 栗子一：引用 bounce 動畫，只需在所在元素節點加入 .bounce();

.bounce{
  .bounce();
  .animation(bounce 1s ease-in-out); }

· 栗子二：引用 bounceIn 動畫，只需在所在元素節點加入 .bounceIn();

.box{
  .bounceIn();
  .animation(bounceIn 1s linear infinite);
}

mixin傳參引用

ps：
· 新增部分傳參功能，能夠自定義動畫幅度參數，實現同類型動畫不一樣幅度；
· 傳參功能不影響原來上面直接引用，參數均可爲空，原來的動畫幅度已經設爲默認值；

具體動畫名和參數說明

動畫名	參數說明	栗子
.bounce(@t; @n)	@t：抖動最小幅度（默認值4px）；@n：動畫幀名（默認值bounce）	.bounce(5px; bounceA)
.pulse(@t; @n)	@t：放大幅度（默認值1.05）；@n：動畫幀名（默認值pulse）	.pulse(1.5; pulseA)
.shake(@x; @n)	@x：抖動最小幅度（默認值10px）；@n：動畫幀名（默認值shake）	.shake(20px; shakeA)
.swing(@d; @n)	@d：旋轉最小角度（默認值5deg）；@n：動畫幀名（默認值swing）	.swing(5deg; swingA)
.wobble(@d; @n)	@d：搖擺最小幅度（默認值1deg）；@n：動畫幀名（默認值wobble）	.wobble(-2deg; wobbleA)
.fadeIn(@x; @y; @n)	@x：x軸移動距離（默認值0）；@y：y軸移動距離（默認值0）；@n：動畫幀名（默認值fadeIn）	.fadeIn(-1000px; 0; fadeInA)
.fadeOut(@x; @y; @n)	@x：x軸移動距離（默認值0）；@y：y軸移動距離（默認值0）；@n：動畫幀名（默認值fadeOut）	.fadeOut(-1000px; 0; fadeOutA)
.turnInDown(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnInDown）	.turnInDown(700px; turnInDownA)
.turnInUp(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnInUp）	.turnInUp(700px; turnInUpA)
.turnInLeft(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnInLeft）	.turnInLeft(700px; turnInLeftA)
.turnInRight(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnInRight）	.turnInRight(700px; turnInRightA)
.turnOutDown(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnOutDown）	.turnOutDown(700px; turnOutDownA)
.turnOutUp(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnOutUp）	.turnOutUp(700px; turnOutUpA)
.turnOutLeft(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnOutLeft）	.turnOutLeft(700px; turnOutLeftA)
.turnOutRight(@p; @n)	@p：perspective值，元素距視圖的距離（默認值600px）；@n：動畫幀名（默認值turnOutRight）	.turnOutRight(700px; turnOutRightA)