缓动 css,CSS3 缓动函数效果动画演示

最新推荐文章于 2024-08-25 19:27:01 发布

福灵善权

最新推荐文章于 2024-08-25 19:27:01 发布

阅读量735

点赞数

文章标签：缓动 css

这篇博客详细介绍了CSS3中的各种缓动效果，包括linear、ease、ease-in、ease-out、ease-in-out、ease-out-circ、ease-in-out-circ、ease-in-back和ease-out-back等，并通过实例代码展示了这些缓动函数在动画中的应用。读者可以通过这些示例理解并掌握不同缓动效果带来的视觉差异。

摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

==================================================

COMMON

==================================================

* {

margin: 0;

padding: 0;

color: #242038;

font-size: 25px;

letter-spacing: 1.5px;

}

ul li {

list-style: none;

}

a {

text-decoration: none;

color: #000;

}

==================================================

CONTENT

==================================================

h1 {

width: 200px;

text-align: center;

margin: 40px 0 50px;

padding: 0 0 8px 0;

display: inline-block;

border-bottom: 2px solid #60992d;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

div#content {

margin: 0 auto;

width: 80%;

padding: 0 0 80px;

}

div#content .wrapper {

margin: 0 20%;

}

div#content ul li {

margin: 0 0 5%;

}

div#content ul li:last-child {

margin: 0;

}

div#content ul li p.easingName {

font-size: 25px;

margin: 0 0 10px 0;

}

div#content ul li p.easingName:before {

content: '∴';

display: inline-block;

font-size: 18px;

padding: 0 10px 0 0;

}

div#content ul li div.easingDemo {

height: 50px;

width: 100%;

background-color: #60992d;

}

==================================================

LINEAR

==================================================

#linear {

-webkit-animation-name: commonAnimation;

-ms-animation-name: commonAnimation;

-moz-animation-name: commonAnimation;

-o-animation-name: commonAnimation;

animation-name: commonAnimation;

-webkit-animation-duration: 2s;

-ms-animation-duration: 2s;

-moz-animation-duration: 2s;

-o-animation-duration: 2s;

animation-duration: 2s;

-webkit-animation-delay: 0s;

-ms-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-timing-function: linear;

-ms-animation-timing-function: linear;

-moz-animation-timing-function: linear;

-o-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-ms-animation-direction: alternate;

-moz-animation-direction: alternate;

-o-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-fill-mode: forwards;

-ms-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

-o-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

==================================================

EASE

==================================================

#ease {

-webkit-animation-name: commonAnimation;

-ms-animation-name: commonAnimation;

-moz-animation-name: commonAnimation;

-o-animation-name: commonAnimation;

animation-name: commonAnimation;

-webkit-animation-duration: 2s;

-ms-animation-duration: 2s;

-moz-animation-duration: 2s;

-o-animation-duration: 2s;

animation-duration: 2s;

-webkit-animation-delay: 0s;

-ms-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

-ms-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

-moz-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

-o-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

-webkit-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-ms-animation-direction: alternate;

-moz-animation-direction: alternate;

-o-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-fill-mode: forwards;

-ms-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

-o-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

==================================================

EASE-IN

==================================================

#ease-in {

-webkit-animation-name: commonAnimation;

-ms-animation-name: commonAnimation;

-moz-animation-name: commonAnimation;

-o-animation-name: commonAnimation;

animation-name: commonAnimation;

-webkit-animation-duration: 2s;

-ms-animation-duration: 2s;

-moz-animation-duration: 2s;

-o-animation-duration: 2s;

animation-duration: 2s;

-webkit-animation-delay: 0s;

-ms-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

-ms-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

-moz-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

-o-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

animation-timing-function: cubic-bezier(0.42, 0, 1, 1);

-webkit-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-ms-animation-direction: alternate;

-moz-animation-direction: alternate;

-o-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-fill-mode: forwards;

-ms-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

-o-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

==================================================

EASE-OUT

==================================================

#ease-out {

-webkit-animation-name: commonAnimation;

-ms-animation-name: commonAnimation;

-moz-animation-name: commonAnimation;

-o-animation-name: commonAnimation;

animation-name: commonAnimation;

-webkit-animation-duration: 2s;

-ms-animation-duration: 2s;

-moz-animation-duration: 2s;

-o-animation-duration: 2s;

animation-duration: 2s;

-webkit-animation-delay: 0s;

-ms-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

-ms-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

-moz-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

-o-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

-webkit-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-ms-animation-direction: alternate;

-moz-animation-direction: alternate;

-o-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-fill-mode: forwards;

-ms-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

-o-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

==================================================

EASE-IN-OUT

==================================================

#ease-in-out {

-webkit-animation-name: commonAnimation;

-ms-animation-name: commonAnimation;

-moz-animation-name: commonAnimation;

-o-animation-name: commonAnimation;

animation-name: commonAnimation;

-webkit-animation-duration: 2s;

-ms-animation-duration: 2s;

-moz-animation-duration: 2s;

-o-animation-duration: 2s;

animation-duration: 2s;

-webkit-animation-delay: 0s;

-ms-animation-delay: 0s;

-moz-animation-delay: 0s;

-o-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

-ms-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

-moz-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

-o-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

-webkit-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-ms-animation-direction: alternate;

-moz-animation-direction: alternate;

-o-animation-direction: alternate;

animation-direction: alternate;

-webkit-animation-fill-mode: forwards;

-ms-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

-o-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

======================================&

最低0.47元/天解锁文章

福灵善权

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫