1. css3中的動畫功能transition和animation兩種的區別是什麼
css中動畫功能分為transition和animation兩種，這個兩種方法都可以通過改變css中的屬性值來產生動畫效果
transition：只能實現兩個簡單值之間的過渡
animation：通過引用keyframes關鍵幀來實現復雜動畫。by三人行慕課
2. 能說CSS3，-webkit-animation，-moz-animation，-o-animation，-ms-animation什麼意思
animation是css3的新屬性，尚處於實驗階段，各種不同內核的瀏覽器都在進行試驗中，也就是說animation在不同的瀏覽器中其支持程度、運行效果等方面是存在差別的，因此為了保證網頁在各種瀏覽器中的兼容性，就要給animation添加各種瀏覽器特有的前綴，比如說 -webkit-animation 只有webkit內核的瀏覽器才能識別並執行，其他則會自動忽略。
目前，IE10+、Firefox 以及 Opera 都已支持標準的 animation 屬性，而 Safari 和 Chrome（它們都是webkit內核）則只支持 -webkit-animation 屬性，所以你的代碼簡寫成以下即可：
-webkit-animation: animations 2s ease-out 1s backwards;
animation: animations 2s ease-out 1s backwards;
3. css3 transition這個動畫效果怎麼寫hover下的某一塊div ,而不是div:hover,這個div
.proct-index.editor.editor1{/*設置來默認屬自性*/
width:100px;height:100px;
background-color:green;
-webkit-transition:all300ms;
-moz-transition:all300ms;
-o-transition:all300ms;
transition:all300ms;
}
.proct-index.editor:hover.editor1{/*這是變換屬性*/
width:200px;
background-color:skyblue;
}
望採納
4. 如何用HTML、CSS3和JavaScript做出下圖的展開、收起的動畫
這樣就是一個展開收縮的效果了
<body>
<div id="div1">
<ul>
<li></li>
</ul>
</div>
<script>
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var Off = true;
oDiv.onclick = function(){
if(Off){
oUl.style.display = "block";
Off = false;
}else{
oUl.style.display = "none";
Off = true;
}
}
</script>
5. css3動畫有哪些實現方式
css3動畫有哪些實現方式？
Transitions 、transforms和 Animations
Transitions特點：平滑的改變CSS的值
transforms特點：變換主要實現（拉伸，壓縮，旋轉，偏移）
Animations特點：適用於CSS2，CSS3
6. css3新增了哪些用來實現動畫效果的屬性
實現動畫效果的屬性，我覺得像這種的話，你可以直接到網上去查學校專業的知識，我覺得這樣子比較好。
7. css3 實現動畫效果，怎樣使他無限循環動下去
一、實現CSS3無限循環動畫代碼示例。
代碼如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50%{
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100%{
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading{
border:5px solid black;
border-radius:40px;
width: 28px;
height: 188px;
-webkit-animation:gogogo 2s infinite linear ;
margin:100px;
}
(7)css3購物車動畫擴展閱讀
實現動畫無限循環所需要的CSS屬性說明：
1、infinite
在animation後面加上infinite就可以無限循環，另外還可以做反向循環使用animation-direction
2、animation-name
規定需要綁定到選擇器的 keyframe 名稱。
3、animation-ration
規定完成動畫所花費的時間，以秒或毫秒計。
4、animation-timing-function
規定動畫的速度曲線。
5、animation-delay
規定在動畫開始之前的延遲。
6、animation-iteration-count
規定動畫應該播放的次數。
7、animation-direction
規定是否應該輪流反向播放動畫。
8. CSS3 動畫 animation-fill-mode:forwards
你要出發某個事件，才能再次執行動畫吧，或通過偽類，或用JS.
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</title>
<style>
.test{
display:block;
width:100px;
height:20px;
border:1pxsolid#ff0000;
-webkit-animation:f02s0.5s1linear;
-webkit-animation-fill-mode:forwards;
}
.test-high{
width:500px;
-webkit-animation:f12s0.5s1linear;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframesf0{
0%{width:100px;}
100%{width:500px;}
}
@-webkit-keyframesf1{
0%{height:20px;}
100%{height:200px;}
}
</style>
</head>
<body>
<div>
<divclass="test">我會長大</div>
<buttontype="button"onclick="goHigher()">變高一點</button>
<script>
functiongoHigher(){
document.getElementsByClassName("test")[0].className="testtest-high";
}
</script>
</body>
</html>
這里div.test會變寬到500px停住，當給他添加上test-high類時，會保持500px的寬度，在變高。
這可能就是你要的，關鍵是再下一個動畫開始前將樣式調整到上一個動畫結束時一樣。
9. css3 實現動畫效果，怎樣使他無限循環動下去
animation:mymove5sinfinite;
在animation後面加上infinite就可以無限循環，另外還可以做反向循環使用animation-direction
animation-name規定需要綁定到選擇器的 keyframe 名稱。
animation-ration規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function規定動畫的速度曲線。
animation-delay規定在動畫開始之前的延遲。
animation-iteration-count規定動畫應該播放的次數。
animation-direction規定是否應該輪流反向播放動畫。
看下下面的代碼
<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst5sinfinite;
animation-direction:alternate;
/*SafariandChrome*/
-webkit-animation:myfirst5sinfinite;
-webkit-animation-direction:alternate;
}
@keyframesmyfirst
{
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;}
}
@-webkit-keyframesmyfirst/*SafariandChrome*/
{
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;}
}
</style>
</head>
<body>
<p><strong>注釋：</strong>InternetExplorer9以及更早的版本不支持animation-direction屬性。</p>
<div></div>
</body>
</html>