dreamweaver
旋转效果。当鼠标移动到这个元素的上面的时候，这个元素就会主动的进行旋转。div:hover{width:200px;height:200px;transform:rotate(180deg);-moz-transform:rotate(180deg); /* Firefox 4 */-webkit-transform:rotate(180deg); /* Safari and Chrome */-o-transform:rotate(180deg); /* Opera */}
过渡效果。我们设置一个两秒的时间值，从而让元素可以均匀的进行变化。div{width:100px;height:100px;background:yellow;transition:width 2s, height 2s;-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */}
让元素宽度增加的效果。div{width:100px;height:100px;background:yellow;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;}div:hover{width:200px;}
设置一个从红色到黄色的动画过渡效果。@keyframes myfirst{from {background:red;}to {background:yellow;}}
让元素的颜色呈现多种变化。这个流程让元素有了四种变化效果。@keyframes myfirst{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}
改变元素的颜色与位置。我们可以把颜色与位置的参数放在一个代码当中。@keyframes myfirst{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}