为了让大家更好地理解“javascript与css3动画结合使用小结”，我将详细阐述攻略的步骤和示例说明。
攻略步骤
步骤1：制定动画效果计划
在使用JavaScript和CSS3组合制作动画效果之前，您需要先确认您所需要的动画效果，比如运动的方向、速度、倍率等等。
步骤2：编写CSS3动画样式
接下来，根据您计划好的动画效果，您需要编写相应的CSS3动画样式。例如，如果您想要一个旋转的效果，您可以使用下面的CSS3代码：
/*设置旋转圆的半径、颜色、播放动画的时间以及在贝塞尔曲线上的时间插值*/
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid #cccccc;
margin: 0 auto;
animation: spin 2s linear infinite;
}
/*定义旋转动画*/
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
步骤3：编写JavaScript代码
在您已经完成CSS3样式编写后，您需要使用JavaScript编写动画操作。主要是操控CSS样式的变化，我们可以使用 Element.style 来获取和更新元素的 CSS3 样式属性。例如，要实现一个旋转的动画，您可以使用下面的代码：
//获取元素
var circle = document.querySelector('.circle')
//设置旋转角度，以及旋转时间
var currentRotation = 0
var time = 0
var increment = 2
//设置动画
function spin() {
currentRotation += increment
circle.style.transform = 'rotate(' + currentRotation + 'deg)'
if (time < 200) {
time += increment
setTimeout(spin, 10)
} else {
time = 0
spin()
}
}
spin()
这份JavaScript代码可以获得旋转圆元素，设置它的初始旋转角度和旋转速度，通过setTimeout 以及递归函数 spin 持续地修改元素的 CSS3 样式属性来实现旋转动画。
步骤4：结合CSS3动画和JavaScript实现动画
最后一步是将两者结合起来，将CSS动画和JavaScript不断修改CSS3属性联合起来，从而创造出完美的动画效果，下面是结合的示例说明。
示例说明
示例1：旋转动画
参考前面的CSS3代码和JavaScript代码，我们可以将它们组合起来实现一个旋转的动画效果，代码如下：
<!-- 在HTML中定义具有动画的圆 -->
<div class="circle"></div>
<!-- 引入JavaScript代码 -->
<script type="text/javascript">
//获取元素
var circle = document.querySelector('.circle')
//设置旋转角度，以及旋转时间
var currentRotation = 0
var time = 0
var increment = 2
//设置动画
function spin() {
currentRotation += increment
circle.style.transform = 'rotate(' + currentRotation + 'deg)'
if (time < 200) {
time += increment
setTimeout(spin, 10)
} else {
time = 0
spin()
}
}
spin()
</script>
这样，我们就可以在网页上看到一个旋转的圆，它的动画效果通过JavaScript和CSS3共同实现。
示例2：淡入淡出动画
首先我们需要先编写CSS3样式，如下所示：
/* 设置元素的初始状态 */
.fade-in {
opacity: 0;
}
/* 平滑淡入 */
.fade-in.fade-in-active {
opacity: 1;
transition: opacity 1s linear;
}
/* 平滑淡出 */
.fade-out {
opacity: 1;
}
.fade-out.fade-out-active {
opacity: 0;
transition: opacity 1s linear;
}
然后，我们需要使用JavaScript来控制元素的类名。具体来说，我们需要通过添加和删除类名来操纵CSS3样式，从而实现淡入淡出的效果，如下所示：
<!-- 在HTML中定义具有动画效果的段落 -->
<p class="fade-in fade-in-active">Hello World</p>
<!-- 编写JavaScript代码 -->
<script type="text/javascript">
// 获取元素
var p = document.querySelector('p')
// 设置淡出
function fadeOut() {
p.classList.remove('fade-in-active')
p.classList.add('fade-out-active')
}
// 设置淡入
function fadeIn() {
p.classList.remove('fade-out-active')
p.classList.add('fade-in-active')
}
// 设置淡入淡出动画
function fade() {
setTimeout(fadeOut, 1000)
setTimeout(fadeIn, 2000)
setTimeout(fade, 3000)
}
fade()
</script>
这份JavaScript代码会获取段落元素，每三秒钟执行一次 fadeIn / fadeOut 两个函数，通过控制元素的类名实现淡入淡出的效果。
通过这两个示例，我们可以看到如何通过JavaScript和CSS3结合使用，实现炫酷的动画效果！