前端HTML5&CSS3笔记--Animation（七）

梧桐街角
167 阅读8分钟

一、过渡 (Transition)

通过过渡可以指定一个属性发生变化时的切换方式；

  1. transition-property：指定要执行过渡的属性 ；

    • 多个属性间使用,隔开；
    • 如果所有属性都需要过渡，则使用all关键字；
    • 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；
    transition-property: height , width;

  2. transition-duration: 指定过渡效果的持续时间；

    transition-duration: 100ms, 2s;

  3. transition-timing-function: 过渡的时序函数

    • ease 默认值，慢速开始，先加速，再减速
    • linear 匀速运动
    • ease-in 加速运动
    • ease-out 减速运动
    • ease-in-out 先加速 后减速
    • cubic-bezier() 来指定时序函数 （cubic-bezier.com）
    • steps() 分步执行过渡效果（分几步执行）
      • end ， 在时间结束时执行过渡(默认值)；
      • start ， 在时间开始时执行过渡；

  4. transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡；

    transition-delay: 2s;

  5. transition 可以同时设置过渡相关的所有属性；

    • 只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟；
     transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);

使用 CSS transitions ( MDN补充)

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

CSS transitions 可以决定哪些属性发生动画效果明确这些属性），时间开始（设置延迟），持续（设置持续时间）以及如何动画（定义定时功能，例如减速地或先快后慢）。

哪些 CSS 属性可以动画?

auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，遵循这点；一些，比如基于 WebKit的，没有这么严格限制。在 auto 上动画结果可能不可预期，这取决于浏览器及其版本，应当避免使用。

同时应当留意这种情形，在插入元素（如 .appendChild()）或改变属性 display: none 后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

高亮菜单过渡效果

CSS 的一个常用地方是当悬停在菜单上时高亮此菜单，使用过渡效果更佳。

二、动画(Animation)

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果；

  1. 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤；

    @keyframes test {
            /* from表示动画的开始位置 也可以使用 0% */
            from {
                margin-left: 0;
                background-color: orange;
            } 

            /* to动画的结束位置 也可以使用100%*/
            to {
                background-color: red;
                margin-left: 700px;
            }
}

  2. animation-name: 要对当前元素生效的关键帧的名字;

    animation-name: test;

  3. animation-duration: 动画的执行时间;

  4. animation-delay: 2s;

  5. animation-iteration-count 动画执行的次数；

    • infinite 无限执行；

  6. animation-direction 指定动画运行的方向；

    • normal 默认值 从 from 向 to运行 每次都是这样 ；
    • reverse 从 to 向 from 运行 每次都是这样；
    • alternate 从 from 向 to运行 重复执行动画时反向执行；
    • alternate-reverse 从 to 向 from运行 重复执行动画时反向执行；

  7. animation-play-state: 设置动画的执行状态

    • running 默认值 动画执行
    • paused 动画暂停

  8. animation-fill-mode: 动画的填充模式

    • none 默认值 动画执行完毕元素回到原来位置
    • forwards 动画执行完毕元素会停止在动画结束的位置
    • backwards 动画延时等待时，元素就会处于开始位置
    • both 结合了forwards 和 backwards

CSS Animation (MDN补充)

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

  1. 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
  2. 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
  3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
配置动画

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。

使用keyframes定义动画序列

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

三、变形 (Transform )

变形就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局，transform 用来设置元素的变形效果。

1. 平移

平移元素，百分比是相对于自身计算的；

  • translateX() 沿着x轴方向平移

  • translateY() 沿着y轴方向平移

  • translateZ() 沿着z轴方向平移

    transform: translateX(100%);

实现居中对齐

.box3 {
     background-color: orange;
     position: absolute;
     /* 
           这种居中方式，只适用于元素的大小确定
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto; */

     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);     
}

被选中有平移阴影效果

.box4, .box5{
	width: 220px;
	height: 300px;
	background-color: #fff;
	float: left;
	margin: 0 10px;
	transition:all .3s;
}

.box4:hover,.box5:hover{
	transform: translateY(-4px);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}

<body>
    <div class="box4"></div>
    <div class="box5"></div>
</body>

2. Z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距。

html{
    /* 设置当前网页的视距为800px，人眼距离网页的距离 */
    perspective: 800px;
}
perspective (MDN补充)

CSS 属性 **perspective**指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

默认情况下，消失点位于元素的中心，但是可以通过设置 perspective-origin 属性来改变其位置。当该属性值不为 0 和 none 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。

放大、缩小效果

.box1 {
    width: 200px;
    height: 200px;
    background-color: #bfa;
    margin: 200px auto;
    transition:2s;
}

body:hover .box1{
     transform: translateZ(600px);
}

3. 旋转

通过旋转可以使元素沿着x y 或 z旋转指定的角度；

  • rotateX()
  • rotateY()
  • rotateZ()

延z轴旋转

transform: rotateZ(.25turn);

旋转并平移

transform: rotateY(180deg) translateZ(400px);

是否显示元素背面

backface-visibility: hidden;

4. 缩放

对元素进行缩放的函数；（拉长的是轴）

  • scaleX() 水平方向缩放
  • scaleY() 垂直方向缩放
  • scale() 双方向的缩放

图片放大

.img-wrapper{
            width: 200px;
         	height: 200px;
            border: 1px red solid;
            overflow: hidden;
}

img{
    transition: .2s;
}

.img-wrapper:hover img{
      transform:scale(1.2);
}

5. 变形的原点 (transform-origin)

默认值为center

transform-origin:20px 20px;
transform-origin: center;
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;
avatar
文章
阅读
粉丝