CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。 不幸的是，他们不支持所有的缓动函数，所以你必须指定贝赛尔曲线实现缓动函数。
div {
-webkit-transition: all 600ms 缓动函数的贝赛尔曲线;
transition: all 600ms 缓动函数的贝赛尔曲线;
}
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser($缓动函数名称));
}
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, '缓动函数名称', function () { … })
←所有缓动函数
easeInSine
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms
cubic-bezier(0.47, 0, 0.745, 0.715); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInSine)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
←所有缓动函数
easeOutSine
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.39, 0.575, 0.565, 1);
transition: all 600ms
cubic-bezier(0.39, 0.575, 0.565, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutSine)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutSine', function () { … })
←所有缓动函数
easeInOutSine
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: all 600ms
cubic-bezier(0.445, 0.05, 0.55, 0.95); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutSine)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
←所有缓动函数
easeInQuad
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 600ms
cubic-bezier(0.55, 0.085, 0.68, 0.53); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInQuad)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInQuad', function () { … })
←所有缓动函数
easeOutQuad
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 600ms
cubic-bezier(0.25, 0.46, 0.45, 0.94); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutQuad)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutQuad', function () { … })
←所有缓动函数
easeInOutQuad
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 600ms
cubic-bezier(0.455, 0.03, 0.515, 0.955); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutQuad)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
←所有缓动函数
easeInCubic
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 600ms
cubic-bezier(0.55, 0.055, 0.675, 0.19); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInCubic)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInCubic', function () { … })
←所有缓动函数
easeOutCubic
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all 600ms
cubic-bezier(0.215, 0.61, 0.355, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutCubic)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … })
←所有缓动函数
easeInOutCubic
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 600ms
cubic-bezier(0.645, 0.045, 0.355, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutCubic)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutCubic', function () { … })
←所有缓动函数
easeInQuart
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: all 600ms
cubic-bezier(0.895, 0.03, 0.685, 0.22); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInQuart)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })
←所有缓动函数
easeOutQuart
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 600ms
cubic-bezier(0.165, 0.84, 0.44, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutQuart)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutQuart', function () { … })
←所有缓动函数
easeInOutQuart
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.77, 0, 0.175, 1);
transition: all 600ms
cubic-bezier(0.77, 0, 0.175, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutQuart)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutQuart', function () { … })
←所有缓动函数
easeInQuint
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition: all 600ms
cubic-bezier(0.755, 0.05, 0.855, 0.06); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInQuint)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInQuint', function () { … })
←所有缓动函数
easeOutQuint
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.23, 1, 0.32, 1);
transition: all 600ms
cubic-bezier(0.23, 1, 0.32, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutQuint)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutQuint', function () { … })
←所有缓动函数
easeInOutQuint
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.86, 0, 0.07, 1);
transition: all 600ms
cubic-bezier(0.86, 0, 0.07, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutQuint)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutQuint', function () { … })
←所有缓动函数
easeInExpo
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.95, 0.05, 0.795, 0.035);
transition: all 600ms
cubic-bezier(0.95, 0.05, 0.795, 0.035); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInExpo)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInExpo', function () { … })
←所有缓动函数
easeOutExpo
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.19, 1, 0.22, 1);
transition: all 600ms
cubic-bezier(0.19, 1, 0.22, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutExpo)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutExpo', function () { … })
←所有缓动函数
easeInOutExpo
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(1, 0, 0, 1);
transition: all 600ms
cubic-bezier(1, 0, 0, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutExpo)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutExpo', function () { … })
←所有缓动函数
easeInCirc
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.6, 0.04, 0.98, 0.335);
transition: all 600ms
cubic-bezier(0.6, 0.04, 0.98, 0.335); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInCirc)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
←所有缓动函数
easeOutCirc
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 600ms
cubic-bezier(0.075, 0.82, 0.165, 1); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutCirc)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
←所有缓动函数
easeInOutCirc
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 600ms
cubic-bezier(0.785, 0.135, 0.15, 0.86); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutCirc)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
←所有缓动函数
easeInBack
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.6, -0.28, 0.735, 0.045);
transition: all 600ms
cubic-bezier(0.6, -0.28, 0.735, 0.045); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInBack)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
←所有缓动函数
easeOutBack
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms
cubic-bezier(0.175, 0.885, 0.32, 1.275); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeOutBack)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
←所有缓动函数
easeInOutBack
CSS
CSS 属性 transition 和 animation 允许你指定缓动函数。
div {
-webkit-transition: all 600ms
cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 600ms
cubic-bezier(0.68, -0.55, 0.265, 1.55); }
在 cubic-bezier.com 编辑
SCSS
Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 transition 和 animation 的前缀，还有 Compass Ceaser 插件允许你直接指定缓动函数名称来实现缓动函数。
div {
@include transition(all 600ms ceaser(
$easeInOutBack)); }
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
←所有缓动函数
easeInElastic
CSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
SCSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInElastic', function () { … })
←所有缓动函数
easeOutElastic
CSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
SCSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutElastic', function () { … })
←所有缓动函数
easeInOutElastic
CSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
SCSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutElastic', function () { … })
←所有缓动函数
easeInBounce
CSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
SCSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInBounce', function () { … })
←所有缓动函数
easeOutBounce
CSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
SCSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeOutBounce', function () { … })
←所有缓动函数
easeInOutBounce
CSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
SCSS
不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 @keyframes来实现。
JavaScript
使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。
div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })