跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Transitions

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Transitions

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

Mouse over the element below to see a CSS transition effect:

CSS

The CSS transition Property

To create a transition effect, you must specify the CSS property you want to add a transition to, and the duration of the transition.

The CSS transition property is a shorthand property for:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

CSS Transition Example

The following example shows a 100px * 100px <div> element. The <div> element has specified a transition effect for the width property, with a duration of 2 seconds:

Example

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s;
}

How to Trigger the Transition

The transition is triggered when there is a change in the element's properties. This often happens within pseudo-classes (:hover, :active, :focus, or :checked).

So, from the code above, the transition effect will start when the width property changes value.

Now, we add a div:hover class that specifies a new value for the width property when a user mouses over the <div> element:

Example

div:hover {
  width: 300px;
}
Try it Yourself »

Notice that when the cursor mouses out of the element, it will gradually change back to its original style.

Change Multiple Property Values

You can change multiple properties by separating them by commas.

The following example adds a transition effect for the width, height, and background-color properties, with a duration of 2 seconds for the width, 4 seconds for the height, and 3 seconds for the background-color:

Example

Add a transition effect for the width, height, and background-color properties:

div {
  transition: width 2s, height 4s, background-color 3s;
}
Try it Yourself »

Transition Subpages

Continue learning about CSS transitions:

  • Transition Timing - speed curves, delay, shorthand

CSS Transition Properties

The following table lists all the CSS transition properties:

Property Description
transition A shorthand property for setting the four transition properties into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect

  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。