Title: CSS3 Transitions
Author: Nick Halsey
Published: <strong>Ṣẹrẹ 1, 2013</strong>
Last modified: Bélú 11, 2017

---

Ṣàwárí àwọn plugin

Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**.
Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu
nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun.

![](https://ps.w.org/css3-transitions/assets/icon.svg?rev=1055205)

# CSS3 Transitions

 Láti ọwọ́ [Nick Halsey](https://profiles.wordpress.org/celloexpressions/)

[Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/css3-transitions.1.3.zip)

 * [Àwọn àlàyé](https://yor.wordpress.org/plugins/css3-transitions/#description)
 * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/css3-transitions/#reviews)
 *  [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/css3-transitions/#installation)
 * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/css3-transitions/#developers)

 [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/css3-transitions/)

## Àpèjúwe

This plugin automatically adds CSS3 transitions to your website/blog and the WordPress
admin. Links, etc. get animated transitions between their normal and hover states.
CSS3 Transitions are supported by the most recent version of every major browser(
Chrome, Internet Explorer 10, Firefox, Opera, Safari); browsers without support 
will continue to render everything as they had before. This plugin adds the transitions(
eye candy) to all `<a>` (link), `<li>` (list item, usually used in navigation menus),`
<img>` (image), and `<input>` (form field and button) tags that have a hover or 
focus state defined (for example, if links change color when the mouse hovers over
them). Other “buttons”, form elements, and WordPress-specific selectors are also
targeted. Transitions are between .2 and .3 seconds in duration, so they shouldnÌtumọ̀
Yorùbá: ’t cross the line between nice and distracting; however, depending on the
colors used in your theme, the transitions may not be noticeable.

Also, please note that image sprites simply donÌtumọ̀ Yorùbá: ’t work well with 
blanket css3 transitions. If you see wierd animations where images scroll between
their normal and hover states, theyÌtumọ̀ Yorùbá: ’re using sprites. Depending on
where the sprites are used, there are various ways to prevent the behavior on those
elements, while retaining transitions where desired. One method is to add an inline
style attribute to those elements: `style="transition: none; -webkit-transition:
none;"`. Adding the css to your theme will override the pluginÌtumọ̀ Yorùbá: ’s 
css as long as you target the elements using sprites by class or id.

Please feel free to offer any feature suggestions you might have and I will consider
them for future releases.

#### CSS3 Transitions UX Theory

Because of the way our brains process images, in simple terms, instant/sudden changes
are generally not as well perceived as more gradual ones. In the physical space,
we never see instant changes, like slides changing with no animation in a PowerPoint,
but with digital technology this is a very common practice. When websites make use
of hover states, for example, if a link changes color when the mouse hovers over
it, they exhibit small, but instant visual changes. Adding the css3 transitions 
makes these changes more gradual, and therefore easier on the eye. For this same
reason, operating systems now tend to make use of a lot of animations. ThereÌtumọ̀
Yorùbá: ’s a lot of neuroscience behind these concepts, but IÌtumọ̀ Yorùbá: ’m not
well versed in that. Basically, _slight_ animations generally look better than instant
changes. Some people will argue that things arenÌtumọ̀ Yorùbá: ’t as “snappy” or
seem slugish with transitions, but if thatÌtumọ̀ Yorùbá: ’s the case, itÌtumọ̀ Yorùbá:’
s only a matter of adjusting the animation timing function and duration.

## Ìgbéwọlẹ̀

 1. Take the easy route and install through the WordPress plugin adder OR
 2. Download the .zip file and upload the unzipped folder to the `/wp-content/plugins/`
    directory
 3. Activate the plugin through the ‘Plugins’ menu in WordPress
 4. CSS3 transitions should automatically be added to your site and WordPress, as long
    as your theme has the `<?php wp_head() ?>` action hook

## FAQ

  Installation Instructions

 1. Take the easy route and install through the WordPress plugin adder OR
 2. Download the .zip file and upload the unzipped folder to the `/wp-content/plugins/`
    directory
 3. Activate the plugin through the ‘Plugins’ menu in WordPress
 4. CSS3 transitions should automatically be added to your site and WordPress, as long
    as your theme has the `<?php wp_head() ?>` action hook

  The Transitions ArenÌtumọ̀ Yorùbá: ’t Working…

First, make sure you know what the transitions look like (and you need to be using
a mouse, not touch, for the majority of them, although they will show up for things
that have css changes because of javascript too). Then, make sure that you are using
a supported browser (Chrome, Internet Explorer 10+, Firefox 16+, Opera 12+, Safari
4+). Next, make sure that your themeÌtumọ̀ Yorùbá: ’s links have a different color
or other effects when you mouse over them. This is the change that will be animated.
Then, make sure that your themeÌtumọ̀ Yorùbá: ’s `header.php` file contains the `
<?php wp_head() ?>` action hook. If none of that works, itÌtumọ̀ Yorùbá: ’s likely
that your theme doesnÌtumọ̀ Yorùbá: ’t support transitions or has explicitly blocked
them. However, you should still get the effects in the WordPress admin area if your
browser supports them.

  WhereÌtumọ̀ Yorùbá: ’s the settings page?

For simplicityÌtumọ̀ Yorùbá: ’s sake, no settings page is included. While there 
are a few potential options, I donÌtumọ̀ Yorùbá: ’t feel that they would be worth
the extra bloat of a settings page. If you would like to make adjustments (such 
as changing the animation duration), you may do so by editing the pluginÌtumọ̀ Yorùbá:’
s php file.

## Àwọn àgbéyẹ̀wò

![](https://secure.gravatar.com/avatar/8ac685e8921cd7f33441b7099600fbe6cc87013ca810162ae2415a8a686bf8bb?
s=60&d=retro&r=g)

### 󠀁[It actually works](https://wordpress.org/support/topic/it-actually-works-5/)󠁿

 [faospark](https://profiles.wordpress.org/faospark/) Èrèlé 10, 2017

I was looking for something that adds effects on the dashboard. You know a little
something to make the ancient ui of wp pop out a little bit and this got the job
done. Straight forward no fancy set up involved

 [ Ka gbogbo àwọn àgbéyẹ̀wò 4 ](https://wordpress.org/support/plugin/css3-transitions/reviews/)

## Àwọn Olùkópa & Olùgbéejáde

“CSS3 Transitions” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa
sí plugin yìí.

Àwọn Olùkópa

 *   [ Nick Halsey ](https://profiles.wordpress.org/celloexpressions/)

[Túmọ̀ “CSS3 Transitions” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/css3-transitions)

### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?

[Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/css3-transitions/), ṣàyẹ̀wò
[ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/css3-transitions/), tàbí ṣe àgbékalẹ̀
sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/css3-transitions/)
nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/css3-transitions/?limit=100&mode=stop_on_copy&format=rss).

## Àkọsílẹ̀ àwọn àyípadà

#### 1.3

 * Introduce improved animation timing function (cubic-bezier(0.64,0.20,0.02,0.35))
 * Remove -moz-, -ms-, and -o- browser prefixes. -webkit- is still required for 
   Safari and older Android, but all other major browsers now support unprefixed
   transitions.
 * Make the transitions faster
 * Tested with WordPress 3.6 and the Twenty Thirteen theme

#### 1.2

 * Fixed a bug where transitions were being applied to the WordPress 3.5 color picker
 * Fixed a bug where transitions were being applied to the WordPress nav menu editor
   drag-and-drop

#### 1.1

 * Fixed bug that made managing menus in the admin almost unusable because of unneeded
   transitions.
 * Added targeting for several more elements, mostly form-related
 * Updated readme

#### 1.0

 * First publically available version of the plugin
 * Tested with WordPress 3.4 and 3.5. Should be compatible with most versions of
   WordPress

## Àkójọpọ̀ Meta

 *  Ẹ̀yà **1.3**
 *  Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 9 sẹ́yìn**
 *  Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **100+**
 *  Ẹ̀yà WordPress ** 3.0 tàbí ju bẹ́ẹ̀ lọ **
 *  Dánwò dé **4.9.29**
 *  Èdè
 * [English (US)](https://wordpress.org/plugins/css3-transitions/)
 * Àwọn àmì
 * [CSS3](https://yor.wordpress.org/plugins/tags/css3/)[effects](https://yor.wordpress.org/plugins/tags/effects/)
   [eye candy](https://yor.wordpress.org/plugins/tags/eye-candy/)[transitions](https://yor.wordpress.org/plugins/tags/transitions/)
   [ui](https://yor.wordpress.org/plugins/tags/ui/)
 *  [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/css3-transitions/advanced/)

## Àwọn ìbò

 4 lára àwọn ìràwọ̀ 5.

 *  [  3 5-star reviews     ](https://wordpress.org/support/plugin/css3-transitions/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/css3-transitions/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/css3-transitions/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/css3-transitions/reviews/?filter=2)
 *  [  1 1-star review     ](https://wordpress.org/support/plugin/css3-transitions/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/css3-transitions/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/css3-transitions/reviews/)

## Àwọn Olùkópa

 *   [ Nick Halsey ](https://profiles.wordpress.org/celloexpressions/)

## Ìrànlọ́wọ́

Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́?

 [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/css3-transitions/)