css過剰効果
8709 ワード
構文
transition:[,]*=[none||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
値をとる
:オブジェクト内の遷移に関与する属性の取得または設定:オブジェクト遷移の取得または設定の期間:オブジェクト内の遷移の取得または設定のアニメーションタイプ:オブジェクト遷移の遅延時間の取得または設定
略語
transition:
border-color .5s ease-in .1s,
background-color .5s ease-in .1s,
color .5s ease-in .1s;分割方法
transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;ケーススタディ
<html>
<head>
<title>test transtiontitle>
<style>
ul{list-style: none;list-style-position: horizontal;}
ul li{width:100px;height:50px;float:left;background-color:#eee;padding:10px;margin-left:10px;
-webkit-transition:background-color .5s ease-in;
-moz-transition:background-color .5s ease-in;
transition:background-color .5s ease-in;
}
ul li:nth-child(1):hover{background-color:red;}
ul li:nth-child(2):hover{background-color:green;}
ul li:nth-child(3):hover{background-color:#90FF90;}
ul li:nth-child(4):hover{background-color:#2DA2C9;}
style>
head>
<body>
<ul>
<li>box1li>
<li>box2li>
<li>box3li>
<li>box4li>
ul>
body>
html>Transition-property遷移効果に関与する要素を定義します
値をとる
none:遷移を指定しないcss属性all:遷移可能なすべてのcss属性:遷移するcss属性を指定する
トランジション効果のあるアトリビュート(Attribute with Transition Effects)
属性名
を選択します.
background-color
color
background-image
only gradients
background-position
percentage, length
border-bottom-color
color
border-bottom-width
length
border-color
color
border-left-color
color
border-left-width
length
border-right-color
color
border-right-width
length
border-spacing
length
border-top-color
color
border-top-width
length
border-width
length
bottom
length, percentage
color
color
crop
rectangle
font-size
length, percentage
font-weight
number
grid-*
various
height
length, percentage
left
length, percentage
letter-spacing
length
line-height
number, length, percentage
margin-bottom
length
margin-left
length
margin-right
length
margin-top
length
max-height
length, percentage
max-width
length, percentage
min-height
length, percentage
min-width
length, percentage
opacity
number
outline-color
color
outline-offset
integer
outline-width
length
padding-bottom
length
padding-left
length
padding-right
length
padding-top
length
right
length, percentage
text-indent
length, percentage
text-shadow
shadow
top length,
percentage
vertical-align
keywords, length, percentage
visibility
visibility
width
length, percentage
word-spacing
length, percentage
z-index
integer
zoom
number