CSS3学习笔记（五）

作者: dev_winner | 来源:发表于2019-08-27 08:03 被阅读0次

CSS3学习笔记（五）
Scss进阶篇3
css3学习笔记
css3学习笔记
CSS3学习笔记
CSS3 学习笔记
CSS3学习笔记
07day
1217
前端学习笔记-CSS3

过渡属性 transition-property：早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可通过以下几个步骤来实现：
1、在默认样式中声明元素的初始状态样式；
2、声明过渡元素最终状态样式，比如悬浮状态；
3、在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
1、transition-property：指定过渡或动态模拟的CSS属性；
2、transition-duration：指定完成过渡所需的时间；
3、transition-timing-function：指定过渡函数；
4、transition-delay：指定开始出现的延迟时间。
transition-property：指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

具有过渡的CSS属性

注意：当transition-property属性设置为all（表示初始状态设置的过渡属性）时，表示所有中点值的属性。举个例子：假设初始状态设置了样式width,height,background，而在终始状态都改变了这三个属性，那么all代表的就是width、height和background。若终始状态只改变了width和height时，那么all代表的就是width和height！
transition-duration属性：用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
transition-timing-function属性：指的是过渡的缓动函数。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

过渡函数

transition-delay属性：指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    .test1 {
        width: 100px;
        height: 100px;
        background: pink;
        margin: 20px auto;
        /*过渡的属性为宽度*/
        -webkit-transition: width;
        transition: width;
        /*完成过渡所需时间为0.5s*/
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        -webkit-transition-delay: .18s;
        transition-delay: .18s;
    }
    .test1:hover {
        width: 300px;
    }
    .test2 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 20px auto;
        -webkit-transition: background-color .5s ease .1s;
        transition: background-color .5s ease .1s;
    }
    .test2:hover {
        background-color: green;
    }
    /*在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。*/
    .test3 {
        width: 150px;
        height: 100px;
        background-color: orange;
        margin: 20px auto;
        -webkit-transition-property: -webkit-border-radius;
        transition-property: border-radius;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .test3:hover {
        border-radius: 20px;
    }
    /*在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。*/
    .test4 {
        width: 100px;
        height: 100px;
        background: blue;
        margin: 20px auto;
        -webkit-transition-property: -webkit-border-radius;
        transition-property: border-radius;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }
    .test4:hover {
        border-radius: 100%;
    }
    </style>
</head>
<body>
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
    <div class="test4"></div>
</body>
</html>

过渡效果展示

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（,）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration（持续时间），第二个为transition-delay（延迟开始时间）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    .wrapper {
        width: 400px;
        height: 200px;
        margin: 20px auto;
        border: 2px dotted red;
        position: relative;
    }
    .wrapper div {
        padding: 15px 20px;
        color: #fff;
        background-color: orange;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        /*all设置所有过渡属性都起作用*/
        -webkit-transition: all .5s ease-in .2s;
        transition: all .5s ease-in .2s;
    }
    .wrapper div:hover {
        background-color: red;
        border-radius: 10px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>鼠标放到我的身上来</div>
    </div>
</body>
</html>

过渡多个CSS属性

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以@keyframes开头，后面紧跟着是动画名称加上一对花括号{…}，括号中就是一些不同时间段样式规则。例如：

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个@keyframes中的样式规则可以由多个百分比构成的，如在0%~100%之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
animation 属性是一个简写属性，用于将动画与元素绑定在一起，其中几个动画属性如下：
1、animation-name：指定要绑定到选择器的关键帧名称；默认值为none。当值为none时，没有任何动画效果，其可用于覆盖任何动画。
2、animation-duration：用来设置CSS3动画播放时间，单位为秒，其默认值为0。若其为负值，则会被视为0。
3、animation-timing-function：设置动画的播放方式；
4、animation-delay：设置动画在启动前的延迟间隔；
5、animation-iteration-count：定义动画的播放次数；默认值为1，表示动画将从开始到结束只播放一次；若取值为infinite，动画将会无限次地播放。
6、animation-direction：指定是否应该轮流反向播放动画。其有两个值：normal、alternate。默认值为normal；当设置为normal时，动画的每次循环都是向前播放（每完成一个周期后瞬间回到初始状态）；当设置为alternate，则轮流反向播放动画。
7、animation-play-state：用来控制元素动画的播放状态。其有两个值：running和paused。默认值为running。主要作用类似于音乐播放器一样，可通过paused暂停正在播放的动画，也可通过running重新播放暂停的动画，这里的重新播放不一定是从元素动画的初始位置播放，而是从暂停的那个位置开始播放。另外，若暂停了动画的播放，元素的样式将回到最原始设置状态。
8、animation-fill-mode：定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

属性值	效果
none	默认值，表示动画在延迟开始时间内显示`背景颜色`（而`不是初始帧！`）；开始后按预期进行和结束，在动画完成其最后一帧时，动画会`回到背景颜色的状态`！
forwards	表示动画在结束后继续应用最后的关键帧的位置（即保持末态关键帧）
backwards	会在向元素应用动画样式时迅速`应用动画的初始帧`，即若与背景颜色不同，在动画的开始延迟时间内显示的每一帧为初始帧状态，在动画完成其最后一帧时显示为`背景颜色的状态`！
both	元素动画同时具有forwards和backwards效果，即动画在第一关键帧上等待动画开始，在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    @keyframes changecolor {
        0% {
            background: red;
        }
        20% {
            background: blue;
        }
        40% {
            background: orange;
        }
        60% {
            background: green;
        }
        80% {
            background: yellow;
        }
        100% {
            background: red;
        }
    }
    div {
        width: 300px;
        height: 200px;
        background: red;
        color: #fff;
        margin: 20px auto;
        text-align: center;
    }
    div:hover {
        /*animation 属性是一个简写属性，将动画与 div 元素绑定*/
        animation: changecolor 5s ease-out .2s;
    }
    </style>
</head>
<body>
    <div>鼠标放在我身上</div>
</body>
</html>

设置动画播放效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>变形与动画</title>
    <style type="text/css">
    @keyframes move {
        0% {
            transform: translateY(90px);
        }
        15% {
            transform: translate(90px, 90px);
        }
        30% {
            transform: translate(180px, 90px);
        }
        45% {
            transform: translate(90px, 90px);
        }
        60% {
            transform: translate(90px, 0);
        }
        75% {
            transform: translate(90px, 90px);
        }
        90% {
            transform: translate(90px, 180px);
        }
        100% {
            transform: translate(90px, 90px);
        }
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        margin: 20px auto;
    }
    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: orange;
        transform: translateY(90px);
        animation-name: move;
        animation-duration: 5s;
        animation-timing-function: ease-in;
        animation-delay: .2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: paused;
    }
    div:hover span {
        /*设置从暂停的位置继续播放*/
        animation-play-state: running;
    }
    </style>
</head>
<body>
    <div><span></span></div>
</body>
</html>

设置动画暂停后继续播放状态