CSS3过渡与转换学习笔记

最新推荐文章于 2024-04-25 22:37:35 发布

临渊1

最新推荐文章于 2024-04-25 22:37:35 发布

阅读量125

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/falttering/article/details/112854719

版权

5 篇文章 0 订阅

订阅专栏

1.CSS3转换（transition）

功能：在规定时间内从一个属性值转换到另一个属性值，如颜色，长度,透明度等。
transition-property：转换的属性 none/all
transition-duration：转换的持续时间，ease/ease-in/ease-out-ease-in-out/linear/cubic-bezier定义自定义转换
transition-timing-function：转换的速度变化
transition-delay：过渡效果的延迟
默认值：all 0 ease 0

2.CSS3旋转（transform）

3.CSS3 transform-origin,translate(),skew()

4.CSS3 scale()函数和多重转换

5.CSS3动画

功能：让一个元素从一种风格逐渐变为另一种风格。
@keyframe规则：让动画在某些时间从当前样式逐渐变为新样式。使用时可用from和to替代0%和100%。
格式： @keyframes animation-name {}
animation-name：动画名。
animation-duration：动画持续时间，单位s或ms。
animation-timing-function：ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)
animation-delay：动画何时开始，单位s或ms。
animation-iteration-count：动画重复的次数，1/2/3/4/5/6/infinite。
animation-direction：如何应用关键帧，normal/reverse/alternate/alternate reverse。alternate：动画先向前，再向后，再向前；alternate reverse：动画先到退，再前进，再倒退。
快捷设置（不要改变属性顺序）:
div {
animation-name: colorchange;
animation-duration: 4s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
div {
animation: colorchange 4s ease-in 2s infinite reverse;
}
以上两段代码效果相同。

6.CSS3 3D转换

关注