不忘初心，让你更有成就感的实用CSS3动效

xyy
2,043 阅读4分钟

不忘初心，让你更有成就感的实用CSS3动效

Sep-13-2021 11-13-33.gif

CSS3动效主要利用transition、transform和animation实现

简介：

1.transition 过渡 是一个连续的过程
2.transform 变换 是一个变化的动作
3.animation 动画 利用关键帧的动画

transition

定义：transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property 规定设置过渡效果的 CSS 属性的名称（就是指定哪个属性应用过渡，比如transition-property:background就是指定background属性应用过渡）。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒（就是指定这个过渡的持续时间）。
  • transition-timing-function 规定速度效果的速度曲线（有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()）
  • transition-delay 定义过渡效果何时开始（过渡延迟多长时间开始）。

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果,其他属性可不写。

语法：transition: property duration timing-function delay;

理解：过渡，用于平滑的改变CSS值

使用：

<!DOCTYPE html>
<html>
<head>
<style> 
    div {
        width:100px;
        height:100px;
        background:blue;
        transition:width 2s;
        -moz-transition:width 2s; /* Firefox 4 */
        -webkit-transition:width 2s; /* Safari and Chrome */
        -o-transition:width 2s; /* Opera */
    }

    div:hover {
        width:300px;
        background:red;
    }
</style>
</head>
<body>

    <div></div>

    <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

transform

定义：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none|transform-functions;

理解：transition不控制变化的产生，与之相对，transform就是用来产生变化的，比如选择，缩放等等。但是transform的变化是没有过渡效果的，就是直接显示变化过的样子了，我们将transition和transform一起用，就能产生渐变的动画效果了。比如旋转、缩放、移动或倾斜等等。

使用：

2D转换

  • translate(x,y)　　相对于当前位置移动　　值100px  表示100像素　　translateX()  translateY()
  • rotate(角度)　　顺时针旋转（负值表示逆时针旋转）　　值30deg 表示30度
  • scale(a,b)　　尺寸缩放　　值2  表示缩放2倍　　scaleX()  scaleY()
  • skew( 角度,角度)　　翻转，x方向，y方向　　值30deg　　表示30度　　skewX()  skewY()

可以使用matrix(n,n,n,n,n,n)将这些变化整合在一起（实际上上面四个变换的本质都是通过 matrix 矩阵来实现的，如果要实现没有提供的效果，可以通过这个函数直接控制）

【注】：transform变换的参照点默认为中心点，可以通过transform-origin(a,b)改变参照点的位置,a,b的值可以是百分比，px，em等，或者left center right  top bottom center

3D转换

  • translate3d(x,y,z)　　3D移动　　translateX(x) translateY(y) translateZ(z)
  • scale3d(x,y,z)　　3D缩放　　scaleX(x) scaleY(y) scaleZ(z)
  • rotate3d(x,y,z,angle)　　3D旋转　　rotateX(angle) rotateY(angle) rotateZ(angle)
  • prespective(n)　　透视视图
<!DOCTYPE html>
<html>
<head>
<style> 
    body {
    	height: 500px;
    	display: flex;
        align-items: center;
        justify-content: center;
    }
    div {
        width:100px;
        height:100px;
        line-height:16px;
        background:blue;
        text-align:center;
        transition:all 2s;
        -moz-transition:all 2s; /* Firefox 4 */
        -webkit-transition:all 2s; /* Safari and Chrome */
        -o-transition:all 2s; /* Opera */
    }

    div:hover {
        width:300px;
        background:red;
        line-height:180px;
        text-align:center;
        transform:rotate(360deg) scale(2,2);
        -ms-transform:rotate(360deg) scale(2,2); /* Internet Explorer */
        -moz-transform:rotate(360deg) scale(2,2); /* Firefox */
        -webkit-transform:rotate(360deg) scale(2,2); /* Safari 和 Chrome */
        -o-transform:rotate(360deg) scale(2,2); /* Opera */
    }
</style>
</head>
<body>
    <div>hello word</div>
</body>
</html>

animation

transition和transform组合使用可以实现一些简单的动画效果，但比较复杂的动画我们一般使用animation 定义：animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name 规定需要绑定到选择器的 keyframe 名称
  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计
  • animation-timing-function 规定动画的速度曲线
    • 　　linear　　匀速
    • 　　ease　　默认 慢-快-慢
    • 　　ease-in　　以快结束
    • 　　ease-out　　以慢结束
    • 　　ease-in-out　　以慢开始和结束　　和ease的区别：ease-in-out中间部分是近似匀速的
    • 　　cubic-bezier(n,n,n,n)　　贝塞尔曲线　　n取值0或者1
    • 　　step-start　　在帧间变化的过程中，以下一帧的显示效果来填充间隔动画，即不连续动画（逐帧动画）
    • 　　step-end　　以上一帧的显示效果来填充间隔动画
    • 　　steps()　　可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数(start/end)来决定显示效果。第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。
  • animation-delay 规定在动画开始之前的延迟
  • animation-iteration-count 规定动画应该播放的次数
  • animation-direction 规定是否应该轮流反向播放动画
    • 　　normal　　 正常播放 正向
    • 　　reverse　　反向播放
    • 　　alternate　　动画在奇数次正向播放，在偶数次反向播放
    • 　　alternate-reverse　　动画在奇数次反向播放，在偶数次正向播放
    • 　　initial　　默认值
    • 　　inherit　　从父元素继承

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

语法：animation: name duration timing-function delay iteration-count direction;

CSS3新增：

  • animation-fill-mode　　动画不播放时，应用到元素的样式

    • 　　none　　默认，无
    • 　　forwards　　动画停留在结束帧
    • 　　backwords　　动画完成后停留在初始帧
    • 　　both　　同时遵循forwards和backwords
    • 　　initial　　默认值
    • 　　inherit　　从父元素继承

  • animation-play-state　　动画运行和暂停

    • 　　paused　　 暂停
    • 　　running　　运行

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

使用：animation需要配合 @keyframes 使用，@keyframes （关键帧）用于创建动画

@keyframes name{
    from{//start css
    }
    to{//end css
    }
}
//or
@keyframes name{
    0%{//start css
    }
    50%{//center css
    }
    100%{//end css
    }
}

例如：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(0deg);
    animation: remove 5s linear 2s infinite alternate;
}

@keyframes remove {
    0%   {background-color:red; left:100px; top:100px;transform: rotate(0deg);}
    25%  {background-color:yellow; left:300px; top:100px;transform: rotate(180deg);}
    50%  {background-color:blue; left:300px; top:300px;transform: rotate(360deg);}
    75%  {background-color:green; left:100px; top:300px;transform: rotate(180deg);}
    100% {background-color:red; left:100px; top:100px;transform: rotate(360deg);}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

丰富：

<!DOCTYPE html>
<html>
<head>
<style> 
 	body,
    html {
      width: 100%;
      height: 100%;
      background: #2b3a42;
      display: flex;
    }
    .demo-cube {
      position: relative;
      width: 100%;
      height: 200px;
    }
    .cube {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
      transform-style: preserve-3d;
      transform-origin: 50px 50px;
      transform: rotateX(-33.5deg) rotateY(45deg);
      animation: slowspin 6s linear infinite 2s;
    }
    .cube div {
      position: absolute;
      display: block;
      width: 100px;
      height: 100px;
      background: rgba(141, 214, 249, 0.5);
      border: 1px solid #fff;
    }
    .cube .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .cube .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .cube .left {
      transform: rotateY(-90deg) translateZ(50px);
    }
    .cube .right {
      transform: rotateY(90deg) translateZ(50px);
    }
    .cube .front {
      transform: translateZ(50px);
    }
    .cube .back {
      transform: translateZ(-50px);
    }
    @keyframes slowspin {
       0%   {left:100px; top:100px;transform: rotateX(-33.5deg) rotateY(45deg);}
      25%  {left:300px; top:100px;transform: rotateX(-33.5deg) rotateY(180deg);}
      50%  {left:300px; top:300px;transform: rotateX(-123.5deg) rotateY(135deg);}
      75%  {left:100px; top:300px;transform: rotateX(33.5deg) rotateY(315deg);}
      100% {left:100px; top:100px;transform: rotateX(-33.5deg) rotateY(45deg);}
    }
</style>
</head>
<body>
  <div class="demo-cube">
    <div class="cube">
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="front"></div>
      <div class="back"></div>
      <div class="right"></div>
      <div class="left"></div>
    </div>
  </div>
</body>
</html>
avatar
文章
阅读
粉丝