why doesn't a cube move with animationmixer and keyframetrack

Question

I'm trying to learn three.js and I'm trying to move a cube with animationmixer. https://discoverthreejs.com/book/first-steps/animation-system/ I'm trying to run the codes in this link but it's not working. I'm looking at the console to see why, but the error doesn't appear. I don't understand why it's not working.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add(cube);

camera.position.set( 0, 0, 3 );
camera.lookAt( 0, 0, 0 );

const positionKF = new THREE.VectorKeyframeTrack(
  '.position',
  [0, 3, 6],
  [0, 0, 0, 2, 2, 2, 0, 0, 0]
);

const opacityKF = new THREE.NumberKeyframeTrack(
  '.material.opacity',
  [0, 1, 2, 3, 4, 5, 6],
  [0, 1, 0, 1, 0, 1, 0]
);

const moveBlinkClip = new THREE.AnimationClip('move-n-blink', -1, [
  positionKF,
  opacityKF
]);

const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(moveBlinkClip);
action.play();
var animate = function () {
requestAnimationFrame( animate ); 
renderer.render( scene, camera );
};

animate();