CSS中的transition属性

CSS中的transition属性可以让你在一定的时间间隔内平滑地改变一个元素从一个样式到另一个样式。这个属性主要应用于以下几种CSS属性:

  • 宽度(width)
  • 高度(height)
  • 背景颜色(background-color)
  • 颜色(color)
  • 位置(position)
  • 透明度(opacity)
  • 字体大小(font-size)等

例如,如果你想让一个元素的背景颜色在两秒内平滑过渡,可以这样写:

复制代码
div {  
  background-color: red;  
  transition: background-color 2s;  
}

当div的背景颜色发生变化时,它将在一个2秒的过渡期间平滑地从红色变为新的颜色。

此外,还可以使用transition属性来指定转变过程中的速度曲线,例如:

复制代码
div {  
  background-color: red;  
  transition: background-color 2s ease-in-out;  
}

在这个例子中,转变过程的速度曲线是ease-in-out,这意味着转变开始时会缓慢,然后速度会增加,在转变结束前会再次减慢。

其他

在CSS中,transition属性是一个简写属性,用于设置四个过渡属性:transition-property、transition-duration、transition-timing-function和transition-delay。这些属性的顺序是固定的,必须按照指定的顺序排列。

例如,以下代码将使元素的背景颜色在2秒内平滑过渡,并在1秒后开始过渡效果:

复制代码
div {  
  background-color: red;  
  transition: background-color 2s ease-in-out 1s;  
}

选中全部属性:transition:all 3s;

(转换属性名称)

transition-property

(转换时间)

transition-duration

(转换曲线)

transition-timing-function

(延时)

transition-delay

转换曲线

linear(匀速)

ease(慢快慢)

ease-in(慢快)

ease-out(快慢)

ease-in-out(慢快慢)比ease慢些

创建动画

@keyframes 动画名{

from{}

to{

transform:translatex(1222px);

}

}

animation:动画名 1s 1(次数)(infinite无穷) alternate(原路返回) ;

animation:start 4s 1 forwards(停留在最后)

.box:hover{

animation-play-state:paused;

}

相关推荐
前端Hardy7 小时前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy7 小时前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
光影少年9 小时前
css优化都有哪些优化方案
前端·css·rust
用户4582031531710 小时前
CSS无需JavaScript的交互效果实现
前端·css
咔咔一顿操作11 小时前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
用户4582031531711 小时前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
霸气小男12 小时前
解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题
css·react.js
rannn_1111 天前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
β添砖java1 天前
CSS3核心技术
前端·css·css3
猫头虎-前端技术1 天前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体