CSS3过渡与动画

CSS3 PV:

CSS3-过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 使用transition属性，CSS3会自动为属性的变化来添加过渡样式。这个属性一般可以用在:hoevr :active等伪元素切换。

transition也是一个复合属性：

1
2
3
4
tag{
    transition:transition-property ransition-duration transition-timing-function transition-delay;
    
}
属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

transition-property

该属性用于定义需要渐变的CSS属性，比如color width等。

可选值 描述
none 没有过渡动画。
all 所有可被动画的属性都表现出过渡动画。
IDENT 性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

transition-duration

该属性定义渐变的时间，要带单位（s,ms）。

transition-timing-function

这个属性是过渡的核心。引用MDN官方的描述：

CSS属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
step-start 直接跳到结束处
step-end transition-duration
steps() 步进函数将过渡时间分成大小相等的时间时隔来运行
没有过度效果，而是一帧一帧的变化，integer等于几就分成几帧，阶跃函数

steps()函数

steps(<integer>[,start| end]?)

:用于指定间隔个数（该值只能是正整数） 第二个参数可选，默认是end,表示开始值保持一次，若参数为start，表示开始值不保持

end:用于指定在step中间隔数少于该有的变化次数时，因该丢弃前面的部分还是后面的部分。

1
2
3
4
5
6
7
8
9
即每个关键帧都分成两次变化完成，则一共有七次变化。
七帧      一共变化七次，  div本身没有颜色，所以最终的背景无色。但是，只变化七次，有七种颜色，加上无色，一种八种状态，所以需要丢弃一种状态

start   橙、黄、灰、蓝、深灰蓝、绿、无色         
原理：去掉第一帧的效果，


end    红、橙、黄、灰、蓝、深灰蓝、无色
原理：去掉最后一帧的效果

cubic-bezier(n,n,n,n)

贝塞尔曲线函数的四个值，具体原理后面研究一下再写一篇博客。

transition-delay

CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

下面写个例子

1
2
3
4
5
6
7
8
9
10
div{
    width:120px;
    color:red;
    transition:all 0.5s ease 1s; 
}

div:hover{
    width:200px;
    color:blue;
}

这段代码设定在鼠标划过时，所有的属性在1s后开始过渡，过渡时间为0.5s，过渡方式为ease。

CSS动画

CSS3中，我们可以用2个属性来定义函数。

  • @keyframes
  • animation

利用这两个属性可以制作简单或复杂的CSS东阿虎

@keyframes

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。

Point：

  1. 如果一个关键帧规则没有指定动画的开始或结束状态（也就是，0%/from 和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

  2. 如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

  3. 如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。

    如果一个@keyframes 里的关键帧的百分比存在重复的情况，以最后一次定义的关键帧为准。 因为@keyframes 的规则不存在层叠样式(cascade)的情况，即使多个关键帧设置相同的百分值也不会全部执行。

如果某一个关键帧出现了重复的定义，且重复的关键帧中的css属性值不同，以最后一次定义的属性为准。例如：

1
2
3
4
5
6
@keyframes identifier {
  0% { top: 0; left: 0px}
  50% { top: 30px; left: 20px; }
  50% { top: 10px; }
  100% { top: 0; left: 30px;}
}

上面这个例子中，50% 关键帧中设置的属性top: 10px是有效的，但是其他的属性会被忽略

  1. 关键帧中出现的 !important 关键词将会被忽略

@keyframes格式如下：

@keyframes 动画名字 {

​ 阶段名:{

​ 元素属性

​ }

}

其中阶段名可以百分比或者from/to

example:

1
2
3
4
5
6
7
@keyframes mykeyframes
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

这样就新建了一个动画关键帧，现在我们就需要使用animation将其添加到对应的元素上。

Powered by Hexo and Hexo-theme-hiker

Copyright © 2019 - 2024 My Wonderland All Rights Reserved.

UV : | PV :