webkitAnimationEnd fires at the start

I'm trying to animate a scrolling ticker that moves text horizontally across the screen.

The webkitAnimationEnd event appears to fire as soon as the page is loaded, rather than when the animation has finished. Why is this happening?

When I look at other examples using the same approach, the event seems to fire correctly when viewed using this same browser - so it must be a problem with my code. I'd like to detect the "end" event so I can update the text in the div element before rescrolling the ticker.)

Here's my code (also in a jsFiddle, here):

var tt;

function startTicker() {
  tt = document.getElementById("tickerText");
  tt.addEventListener('webkitAnimationEnd', updateTicker());
}

function updateTicker() {
  alert('end');
}

body {
  color: #829CB5;
  background-color: #1A354A;
  font-size: 60%;
  font-family: sans-serif;
  overflow: hidden
}

div#ticker {
  font-size: 140%;
  position: absolute;
  top: 0;
  left: -2px;
  border-width: 2px;
  height: 1em;
  width: 101%;
  background-color: black;
  color: #CEEAFA;
}

div#tickerText {
  position: absolute;
  top: 2px;
  left: 0px;
  height: 1em;
  width: 101%;
  background-color: black;
  color: #CEEAFA;
  -webkit-transform: translateX(100%);
  -webkit-animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-name: scrollTicker;
}

@-webkit-keyframes scrollTicker {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<html>

<head>

</head>

<body onload="startTicker()">

  <div id="ticker">
    <div id="tickerText">Test</div>
  </div>

</body>

</html>

I'd like to use just CSS and Javascript (rather than libraries like Jquery).

Solution

When you are registering the event listener

tt.addEventListener('webkitAnimationEnd', updateTicker());

you are actually calling the function. It should not have the () after updateTicker

it should look like

tt.addEventListener('webkitAnimationEnd', updateTicker);

so that the function is passed to the addEventListner function