本文目录一览：
- 1、JS 怎么动态设置CSS3动画的样式
- 2、怎样用JS把CSS动画封装起来
- 3、js+css如何实现动画效果？
- 4、怎样实现用js的onclick事件控制css动画播放
- 5、如何用js控制css中的帧动画
- 6、怎么用js触发css3动画
JS 怎么动态设置CSS3动画的样式
说说原理，这里并不是纯css3，，只是用css3定义好动画，
@-moz-keyframes tips {
0% {box-shadow: 0px 0px 0px #f00;}
25% {box-shadow: 0px 0px 8px #f00;}
50% {box-shadow: 0px 0px 0px #f00;}
100% {box-shadow: 0px 0px 8px #f00;}
}
然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。
.tips {
-webkit-animation:tips 1s;
-moz-animation:tips 1s ;
}
当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。
怎样用JS把CSS动画封装起来
1.进入网站有一个视频，希望视频播放完之后触发CSS3动画，但是视频受网络影响，实际播放完成的时间不好控制。
2.所以css的延迟时间不好控制，如果视频卡了一下，时间就错过了
3.怎样能在视频完成的时候触发animation呢?
4.下面是动画，div从左到右运动
#banner-cloud-1{
position: absolute;
top: 0px;
left: 0;
-webkit-animation:cloud-move-1 5s linear;
-o-animation:cloud-move-1 5s linear;
animation:cloud-move-1 5s linear;
-webkit-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes cloud-move-1{
from{
left: 0;
}
to{
left:-3760px;
}
}
5.下面是视频结束时触发的函数
videos.onended = function(){
//触发事件一
//触发事件二
//触发事件三
//……..
//触发上面的 animation 动画
}
js+css如何实现动画效果？
简单的不用js就行
!DOCTYPE HTML
html
head
meta charset= “utf8”
titleuntitled/title
link rel = “stylesheet” type = “text/css” href = “”
style type = “text/css”
*{
margin: 0px;
padding: 0px;
}
#a{
position: absolute;
width: 50px;
height: 50px;
background-color: #f3e9e0;
border-radius: 50%;
left: 400px;
top: 200px;
}
#a div{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
transition: all 0.5s;
left: 0px;
top: 0px;
}
#a :nth-child(1){
background-color: #c1d4ed;
}
#a :nth-child(2){
background-color: #7d6e69;
}
#a :nth-child(3){
background-color: #dad6d5;
}
#a :nth-child(4){
background-color: #caaa9d;
}
#a :nth-child(5){
background-color: #6bdeff;
}
#a:hover :nth-child(1){
left: 150px;
top: -150px;
}
#a:hover :nth-child(2){
left: 150px;
top: 150px;
}
#a:hover :nth-child(3){
left: 300px;
top: -150px;
}
#a:hover :nth-child(4){
left: 300px;
top: 150px;
}
#a:hover :nth-child(5){
left: 450px;
top: 0px;
}
/style
/head
body
div id = ‘a’
div/div
div/div
div/div
div/div
div/div
/div
/body
/html
鼠标伸到球上 自动扩散移动
怎样实现用js的onclick事件控制css动画播放
绑定事件函数就好
input type=”button” value=”开始” id=”play” onclick=”play()” /绑定onclick事件
script
点击时候调用的函数
function play(){
这里面写你要写的动画
}
/script
如何用js控制css中的帧动画
/持续设置图片旋转角度，使其显示旋转动画
setInterval(function(){
$(“#donghua”).css({“position”:”relative”,”left”:-n+”px”,”background-position”:n+”px 0px”});
n=(n-777)?n-111:-111;
},300);
/script
怎么用js触发css3动画
你用CSS3的方式预先写好动画样式，不调用这个class,前端中设置鼠标经过增加一个class，这样鼠标指向的时候就有CSS3的动画，鼠标离开去除样式动画结束
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/283716.html
微信扫一扫 
支付宝扫一扫 