css3-animation-复习篇

1. `@keyframes`使用

@keyframes 动画名 {from {// 开始要的操作的帧动画background: #fff;}to {// 结束要的操作的帧动画background: #e74c3c;}
}

2.调用keyframes动画

标签名 {animation: 动画名 执行时间;
}

列如

main {animation: hd 2s;
}

2.1 元素的放大和缩小

transform: scale(放自身大的倍数)

div {transform: scale(2);}

2.3 设置绑定多个帧动画

不能直接写到animation里面，不然只会实现最后一个帧动画。
使用animation-name绑定多个帧动画

div {animation: 4s infinite;animation-name: bg,translate;
}

2.3.2 设置缩放-transform

transform: scale(0);

使用后导致本div消失，原理是设置缩放大小为最小的0

2.4 设置动画结束后停止，不会到初始状态

不可以和无限动画循环（infinite）连用

div {animation-fill-mode: forwards;/* 可以简写到animation里面 */animation: scale 2s forwards;
}

2.5 设置动画执行的次数

div {// animation-iteration-count: 执行的次数,第二个动画执行的次数;animation-iteration-count: 2;
}

aria-hidden="true"是什么意思
- 这一套协定是w3和apple为了残疾人士无障碍使用网站
  
  例如视障人士, 在读到这一句 aria-hidden="true 的时候, 就会自动忽略跳过

<i aria-hidden="true"><i>

2.6 设置动画播放顺序


li:nth-child(1)>i{/* 正常播放动画 */animation-direction: normal;
}
li:nth-child(2)>i{/* 翻转动画 */animation-direction: reverse;
}
li:nth-child(3)>i{/* 轮流动画 */animation-direction: alternate;
}
li:nth-child(3)>i{/* 多次循环平滑过渡动画 */animation-direction: alternate-reverse;
}

/* filter模糊滤镜，范围25px */filter: blur(5px);
/* animation-delay延迟2s执行动画 */animation-delay: 2s;

2.7 帧动画-细调

normal 原始状态到原始状态，backword 起始帧到原始状态， forward 起始状态到结束帧， both 起始帧到结束帧

1.方法一

/* 设置一开始消失（缩放到0），设置保持结束帧（缩放100%） */transform: scale(0);animation-fill-mode: forwards;

2.方法二

/* 立即应用第一个关键帧中定义的值 */animation-fill-mode: backwards;

2.8 贝塞尔曲线动画


li:nth-child(1) {/* 过渡的帧 */animation-timing-function: ease;
}
li:nth-child(2) {/* 过渡的帧,先慢到快 */animation-timing-function: ease-in;
}
li:nth-child(3) {/* 过渡的帧，先快再到慢 */animation-timing-function: ease-out;
}
li:nth-child(4) {/* 过渡的帧，中间快两边慢 */animation-timing-function: ease-in-out;
}
li:nth-child(5) {/* 过渡的帧，线性 */animation-timing-function: linear;
}
li:nth-child(6) {/* 自定义贝赛尔曲线, *//* https://cubic-bezier.tupulin.com/#cubic-bezier(0.44,-0.32,0.42,1.19) */animation-timing-function: cubic-bezier(0.44, -0.32, 0.42, 1.19);
}

2.9设置背景颜色和文本一致

  /* currenColor获取文本的颜色 */background-color: currentColor;

2.10 用伪类+阴影实现加载小点


button::after {content: "";width: 3px;height: 3px;display: inline-block;/* box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor; */animation: hd 1s infinite;
}

@keyframes hd {from {box-sizing: none;}
30% {box-sizing: 3px 0 0 currentColor;}
60% {box-sizing: 3px 0 0 currentColor, 9px 0 0 currentColor;}
90% {box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor;}
}

2.11 进步动画规则

/* 按照4次，从开始就跑 */animation-timing-function: steps(4,start);
/* 动画开始后再跑 */animation-timing-function: steps(4,end);

2.12 暂停动画属性

div:hover::before {/* 鼠标移动到div时，暂停动画 */animation-play-state: paused;
}

2.13 开启动画属性

main:hover div::before {/* 移动div上，开启动画 */animation-play-state: running;
}

3. 栅格化布局

  /* 栅格布局 */display: grid;/* 划分三行，上10vh，中间自适应，下10vh */grid-template-rows: 10vh 1fr 10vh;

  /* 弹性盒模型，按列排列 */display: flex;flex-direction: column;

  /* 栅格布局,自适应，且只有一个 */grid-template: 1fr/1fr;

/* 栅格化布局，1行5列自适应 */display: grid;grid-template: 1fr/repeat(5,1fr);/* 间距 */gap: 10px;

css3-animation-复习篇相关推荐

html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
CSS3 animation实现点点点loading动画
一.再续前缘去年夏天,写了篇名为"CSS3 animation渐进实现点点点等待提示效果"的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实 ...
html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索"旋转","跳跃","反转"等词语,会出现相应的动画效果(搜索"反转"后的效果).查看源 ...
CSS3 (animation)
CSS3 animation 动画实例代码: 属性取值说明: animation: animation-name animation-duration animation-timing-functi ...
C语言复习篇之数组与指针
C语言复习篇之数组与指针学习了一段时间的嵌入式linux了,学习中有很多的东西需要总结,有经验有教训,我觉得把他写下来会更好,就当做是一种笔记的形式,记录学习中的点点滴滴,不仅仅自己可以经常复习,也 ...
用不同的姿势求逆序对（复习篇）
用不同的姿势求逆序对(复习篇) 文章目录用不同的姿势求逆序对(复习篇) 前言讲解归并排序树状数组线段树题目思路代码归并排序求逆序对树状数组求逆序对线段树求逆序对历届试题小朋友 ...
CSS3(animation, trasfrom)总结
CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...
html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
最小生成树，回忆复习篇。
最小生成树,回忆复习篇. 以前听过一遍最小生成树,可惜,当时没弄会.过了几天就全忘了.而如今在做LCA的时候,woc我居然不会最小生成树了. 所以来回忆一下最小生成树. kruskal算法.这个算法的 ...

css3-animation-复习篇

1. `@keyframes`使用

css3-animation-复习篇相关推荐

最新文章

热门文章

css3-animation-复习篇

1. @keyframes使用

css3-animation-复习篇相关推荐

最新文章

热门文章

1. `@keyframes`使用