笔记(css3)-动画

语法

转换

css3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它分为2D转换或 3D转换，一般与动画结合使用。

平移

语法

transform:translate(x,y)

以元素当前的位置为相对参照，进行水平、垂直方向移动；x 表示水平方向移动，y 表示垂直方向移动；若是只设置一个值则代表水平移动；
单位
- px
- 百分比:x、y的取值如果是百分比，则是相对于元素本身尺寸

旋转

语法

rotateX()                        /* 沿X轴旋转 */
rotateY()                       /* 沿Y轴旋转 */
rotateZ()                       /* 沿Z轴旋转 */
rotate()                      /* 默认沿着z轴旋转 */

取值
- 角度值为正数，表示顺时针旋转；
- 角度值为负数，表示逆时针旋转；

缩放

语法

transform:scale(h,v)

h表示水平缩放比例，v表示垂直缩放比例 -> 如果设置1个值，表示水平以及垂直同时缩放
取值
- 0-1之间缩小
- 大于1进行放大

复合属性的顺序问题

transform是一个复合属性，可以同时设置平移、旋转、缩放。
需要值得注意的是，变换的执行顺序是从后向前执行的！

过渡动画

语法

transition:all 1s ease 1s;

transition是一个复合属性

transition-property 指定应用过渡属性的名称 (width ,height,、、、、all表示所有的属性都有过渡效果)
transition-duration：过渡时间
transition-timing-function：过渡曲线
- ease --默认 (由慢速开始，加速，慢速结束)
- linear–匀速
- ease-in --慢速开始
- ease-out --慢速结束

过渡属性是谁过渡给谁加！
transition动画的缺点

[1]动画不能够自动开始(可以借助hover)；
[2]动画次数只能固定一次，不能循环；

帧动画

帧动画规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式，使用帧动画分为两步：

[1] 定义帧动画

@keyframes 动画名{from {// 开始的css样式}to{// 结束的css样式}
}

@keyframes 动画名{0% {// 开始的css样式}50%{// 中间过渡的css样式}...100%{// 结束的css样式}
}

[2] 使用帧动画
- animation是一个复合属性，规定了除animation-play-state属性外的所有属性的简写属性；
```
  animation: 动画名 动画一个周期所需时间 动画速度 动画延迟时间 动画次数 停留位置；
```
  - animation-name:属性名
  - animation-duration:规定动画完成一个周期所花费的s数；
  - animation-timing-function: 规定动画的速度曲线
    - ease --默认 (由慢速开始，加速，慢速结束)
    - linear–匀速
    - ease-in --慢速开始
    - ease-out --慢速结束
    - steps–指定了时间函数中的间隔数量（步长）
```
  steps(10) /* 表示这个动画需要将时间平分为10段来完成*/
```
  - animation-delay: 规定动画的延迟时间
  - animation-iteration-count:规定动画的播放次数
    - 1次(默认)
    - infinite:无数次
  - animation-paly-state:规定动画是否正在运行或暂停
    - running:正在运行
    - pause:暂停
  - animation-fill-mode: 规定动画结束时的状态
    - forwards:设置对象状态为动画结束时的状态
    - backwards(默认): 设置对象状态为动画开始时的状态
注意：若是仅定义帧动画而没有使用，将不会产生任何效果。

案例

案例1-热点图dot(缩放)

现在存在图片,做成一个呼吸效果的动画，->动画视频链接

实现代码如下：

<body><img src="https://cdn.ituibei.cn/dist/welfareAT02/private/C/CFirstLayer_31/img/water_24855.png" alt="">
</body>

<style>@keyframes dot{0%{transform: scale(0);opacity: 0;}100%{transform: scale(1.3);}}body{background-color: red;text-align: center;padding-top: 100px;}img{animation: dot 0.6s linear infinite;width:24px;height: 24px;}
</style>

实现过程

- 在定义动画时只定义了to(初始样式)，没有定义from(结束样式)，则默认结束样式为当前元素的样式----> img标签没有定义transform与opacity，则结束时的样式为默认值
```
transform:scale(1);
opacity:1;
```
- 动画仅执行一次，此时在运行时这个图片是一个渐入的感觉-> 动画视频链接
- 只要将动画次数改成无数次，就已经实现了所需效果，但是若是想效果更丝滑一点，可以在from(结束时)方大一下，这样在每次动画结束下次动画开始时会有一个回缩的效果；
```
100%{transform: scale(1.3);
}
```

案例2-热点图dot(缩放)

若是dot为非图片，则一个类似案例1的呼吸动画，实现代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {background-color: #999;padding-top: 100px;text-align: center;}.fa {position: relative;}.dot {position: absolute;width: 8px;height: 8px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;background-color: chartreuse;}.wave {/* 光波最初时与dot大小相同，只是带有阴影 */position: absolute;width: 8px;height: 8px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;box-shadow: 0 0 12px chartreuse;animation: bo 1.2s linear infinite;}@keyframes bo {/* 没有设置初始状态，则初始状态为添加动画元素的初始状态width: 8px;height: 8px;opacity: 1;*/70% {width: 30px;height: 30px;opacity: 1;}100% {width: 50px;height: 50px;opacity: 0;}}.dal {animation-delay: 0.6s;}</style></head><body><div class="fa"><div class="dot"></div><div class="wave"></div><div class="wave dal"></div></div></body>
</html>

案例3-开红包(旋转)

如上图在点击“开”时，希望这个“开”字能够沿着Y轴旋转几圈再进行页面跳转 ->动画视频链接 -> 添加动画效果，实现如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>开红包</title></head><body><div class="bg"><img src="https://lp-ag.umcdn.cn/952575f71c38ffee4ef9ccad033f2ed0/98afec881a187b8c7945a3f0eac7e032.png" class="openbtn"/></div><script>const imgbox = document.getElementsByClassName('openbtn')[0]imgbox.onclick= function(){imgbox.setAttribute('class','openbtn rotateClass')setTimeout(()=>{imgbox.setAttribute('class','openbtn')location.href = 'https://www.baidu.com'},1000)}</script></body><style>@keyframes torotate{from{transform: rotateY(360deg);}}*{padding:0;margin: 0;}.bg{position: relative;height: 100vh;background: url('https://static.adhudong.com/display/styles/images/bodyBg2.8a73276b.png') no-repeat left top;background-size: cover;}.openbtn{position: absolute;top: 175px;left:calc(50% - 50px);width: 100px;height: 100px;}.rotateClass{animation: torotate 0.5s linear infinite;}</style>
</html>

问题

问题1-transform不起作用

现在想做一个效果就是 “开”在水平方向居中且一直旋转，实现如下

 <body><div class="bg"><img src="https://lp-ag.umcdn.cn/952575f71c38ffee4ef9ccad033f2ed0/98afec881a187b8c7945a3f0eac7e032.png" class="openbtn"/></div></body><style>@keyframes torotate{from{transform: rotateY(360deg);}}*{padding:0;margin: 0;}.bg{position: relative;height: 100vh;background: url('https://static.adhudong.com/display/styles/images/bodyBg2.8a73276b.png') no-repeat left top;background-size: cover;}.openbtn{position: absolute;top: 175px;left:50%;transform: translateX(-50%);width: 100px;height: 100px;animation: torotate 0.5s linear infinite;}</style>

但是结果却与预期不同，原因是因为在帧动画中 transform这个属性一直在被重新；
解决办法是将translateX(-50%)添加到帧动画中

@keyframes torotate{from{transform: translateX(-50%) rotateY(360deg);}to{transform: translateX(-50%) rotateY(0deg);}
}

问题2 - 过渡动画不起效果

问题：上图在展开和收缩的时候想做一个过渡动画，但是发现设置了不起作用；

原因：过渡属性要有明确的属性值变化；width、height值被撑开但是值没变就没有办法过渡动画了；

总结：内容撑开的盒子没有办法做宽高的过渡动画